import React from "react";
import classes from "./classes.module.scss";
import TextField from "../Form/TextField";
import Button, { EButtonVariant } from "../Button";
import Typography, { ITypo, ITypoColor } from "../Typography";
import Mailchimp from "@Front/Api/LeCoffreApi/Notary/Mailchimp/Mailchimp";
import Form from "../Form";
import Mail from "@Assets/Icons/mail.svg";
import Image from "next/image";

type IProps = {
	isOpen?: boolean;
};

interface IState {
	email: string;
	errorMessage: string;
	successMessage: string;
	isNewsletterOpen: boolean;
}

export default class Newsletter extends React.Component<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			email: "",
			errorMessage: "",
			successMessage: "",
			isNewsletterOpen: this.props.isOpen ?? false,
		};
	}

	handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
		this.setState({ email: e.target.value });
	};

	handleSubmit = async (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => {
		if (!e) return;
		e.preventDefault();

		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (!emailRegex.test(this.state.email)) {
			this.setState({ errorMessage: "L'adresse email que vous avez saisie est déjà inscrite ou est invalide.", successMessage: "" });
			return;
		}

		const notairesRegex = /^[^\s@]+@notaires\.fr$/;
		if (!notairesRegex.test(this.state.email)) {
			this.setState({ errorMessage: "Veuillez utiliser une adresse e-mail professionnelle.", successMessage: "" });
			return;
		}

		Mailchimp.getInstance().post({ email: this.state.email });
		// Clear error message
		this.setState({ errorMessage: "" });

		// Normally, form submission would happen here
		// For demo purposes, we'll just show a success message
		this.setState({ successMessage: "Félicitations ! Vous êtes maintenant inscrit(e).", email: "" });
	};

	private handleNewsletterOpen(isNewsletterOpen: boolean): void {
		this.setState({ isNewsletterOpen: !isNewsletterOpen });
	}

	public override render(): JSX.Element {
		return (
			<>
				{this.state.isNewsletterOpen && (
					<div className={classes["container"]}>
						<div className={classes["root"]}>
							<div className={classes["text"]}>
								<Typography typo={ITypo.TITLE_H5} color={ITypoColor.COLOR_GENERIC_WHITE}>
									Restez Informé(e) avec notre Newsletter
								</Typography>
								<Typography typo={ITypo.TEXT_LG_REGULAR} color={ITypoColor.COLOR_GENERIC_WHITE}>
									Ne manquez aucune de nos actualités, promotions exclusives et conseils d'experts !
								</Typography>
								{this.state.errorMessage && (
									<div>
										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_ERROR_600}>
											{this.state.errorMessage}
										</Typography>
									</div>
								)}
								{this.state.successMessage && (
									<div>
										<Typography typo={ITypo.TEXT_MD_REGULAR} color={ITypoColor.COLOR_SUCCESS_600}>
											{this.state.successMessage}
										</Typography>
									</div>
								)}
							</div>

							<div className={classes["buttons"]}>
								<Form onSubmit={this.handleSubmit} className={classes["form"]}>
									<TextField name="EMAIL" placeholder="Email" onChange={this.handleChange} />
									<div className={classes["buttons-container"]}>
										<Button fullwidth type="submit" variant={EButtonVariant.PRIMARY}>
											Envoyer
										</Button>
									</div>
								</Form>
							</div>
						</div>
					</div>
				)}

				<div className={classes["container-icon"]}>
					<div className={classes["newsletter"]}>
						<Image
							src={Mail}
							alt="newsletter-icon"
							className={classes["newsletter-icon"]}
							onClick={() => this.handleNewsletterOpen(this.state.isNewsletterOpen)}
						/>
					</div>
				</div>
			</>
		);
	}
}