import React, { useCallback, useEffect, useState } from "react";
import classes from "./classes.module.scss";
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
//import Image from "next/image";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button from "@Front/Components/DesignSystem/Button";
//import franceConnectLogo from "../france-connect.svg";
// import { useRouter } from "next/router";
// import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
import { ValidationError } from "class-validator";
import Image from "next/image";
import LogoSmallBlue from "@Assets/logo_small_blue.svg";

import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
import { useRouter } from "next/router";
import { FrontendVariables } from "@Front/Config/VariablesFront";
import Confirm from "@Front/Components/DesignSystem/OldModal/Confirm";

type IProps = {
	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
	validationErrors: ValidationError[];
};

export default function StepEmail(props: IProps) {
	const { onSubmit, validationErrors } = props;
	const [isErrorModalOpen, setIsErrorModalOpen] = useState(0);

	/* const router = useRouter();
	const redirectCustomerOnConnection = useCallback(() => {
		async function getCustomer() {
			try {
				const loginRes = await Customers.getInstance().login();
				router.push(loginRes.enrollment.franceConnectUrl);
			} catch (e) {
				console.error(e);
			}
		}
		getCustomer();
	}, [router]); */

	const router = useRouter();
	const error = router.query["error"];
	const redirectUserOnConnection = useCallback(() => {
		/* TODO: review
		const variables = FrontendVariables.getInstance();
		router.push(
			`${variables.IDNOT_BASE_URL + variables.IDNOT_AUTHORIZE_ENDPOINT}?client_id=${variables.IDNOT_CLIENT_ID}&redirect_uri=${
				variables.FRONT_APP_HOST
			}/authorized-client&scope=openid,profile&response_type=code`,
		);
		*/
		router.push(
			`https://qual-connexion.idnot.fr/user/IdPOAuth2/authorize/idnot_idp_v1?client_id=B3CE56353EDB15A9&redirect_uri=http://local.lecoffreio.4nkweb:3000/authorized-client&scope=openid,profile&response_type=code`,
		);
	}, [router]);

	const openErrorModal = useCallback((index: number) => {
		setIsErrorModalOpen(index);
	}, []);

	const closeErrorModal = useCallback(() => {
		setIsErrorModalOpen(0);
	}, []);

	const closeNoEmailModal = useCallback(() => {
		setIsErrorModalOpen(0);
		router.push("https://connexion.idnot.fr/");
	}, [router]);

	// const closeContactAdminModal = () => {
	// 	setIsErrorModalOpen(0);
	// 	window.open("https://www.lecoffre.io/contact", "_blank");
	// };

	useEffect(() => {
		openErrorModal(parseInt(error as string));
	}, [error, openErrorModal]);

	return (
		<div className={classes["root"]}>
			<div className={classes["header"]}>
				<Image src={LogoSmallBlue} alt="Logo small blue" height="56" width="56" />
				<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_ACCENT}>
					Bienvenue !
				</Typography>
				<Typography typo={ETypo.TITLE_H5}>Connectez-vous pour accéder à votre espace sécurisé.</Typography>
			</div>
			<div className={classes["content"]}>
				<div className={classes["section"]}>
					<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
						Pour les notaires et les colaborateurs :
					</Typography>
					<Button onClick={redirectUserOnConnection} rightIcon={<Image alt="id-not-logo" src={idNoteLogo} />}>
						S'identifier avec ID.not
					</Button>
				</div>
				<div className={classes["section"]}>
					<Typography typo={ETypo.TITLE_H6} color={ETypoColor.TEXT_ACCENT} className={classes["section-title"]}>
						Pour les clients :
					</Typography>
					<Form className={classes["form"]} onSubmit={onSubmit}>
						{
							<TextField
								placeholder="Renseigner votre email"
								label="E-mail"
								name="email"
								validationError={validationErrors.find((err) => err.property === "email")}
							/>
						}
						<Button type="submit">Se connecter</Button>
					</Form>
				</div>
			</div>
			<Confirm
				isOpen={isErrorModalOpen === 1}
				onClose={closeErrorModal}
				showCancelButton={false}
				onAccept={closeErrorModal}
				closeBtn
				header={"Abonnement Manquant"}
				confirmText={"Fermer"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ETypo.TEXT_MD_LIGHT} className={classes["text"]}>
						Vous ne disposez pas d'un abonnement actif. Veuillez demander au référent de votre étude de souscrire à un
						abonnement pour activer cette fonctionnalité. Pour toute question, contactez-nous à support@lecoffre.io.
					</Typography>
					<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
							Contactez le support
						</Typography>
					</a>
				</div>
			</Confirm>
			<Confirm
				isOpen={isErrorModalOpen === 2}
				onClose={closeErrorModal}
				showCancelButton={false}
				onAccept={closeErrorModal}
				closeBtn
				header={"Session expirée"}
				confirmText={"OK"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
						Veuillez vous reconnecter.
					</Typography>
				</div>
			</Confirm>
			<Confirm
				isOpen={isErrorModalOpen === 3}
				onClose={closeErrorModal}
				onAccept={closeNoEmailModal}
				closeBtn
				header={"E-mail Professionnel Manquant"}
				confirmText={"Accéder à mon compte ID.not"}
				cancelText={"Fermer"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
						Votre e-mail professionnel n'est pas renseigné sur votre compte ID.Not. Merci de l'ajouter pour accéder à ce
						service. Pour toute question, contactez-nous à support@lecoffre.io.
					</Typography>
					<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
							Contactez le support
						</Typography>
					</a>
				</div>
			</Confirm>
			<Confirm
				isOpen={isErrorModalOpen === 4}
				onClose={closeErrorModal}
				showCancelButton={false}
				onAccept={closeErrorModal}
				closeBtn
				header={"Connexion à ID.Not impossible"}
				confirmText={"Fermer"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
						Notre partenaire ID.Not rencontre actuellement un problème technique. Nous vous tiendrons informé de l'évolution.
						Pour toute question, contactez-nous à support@lecoffre.io.
					</Typography>
					<a className={classes["modal-button"]} href="mailto:support@lecoffre.io" target="_blank">
						<Typography typo={ETypo.TEXT_MD_REGULAR} color={ETypoColor.COLOR_SECONDARY_500} className={classes["button-text"]}>
							Contactez le support
						</Typography>
					</a>
				</div>
			</Confirm>
			{/* <Confirm
				isOpen={isErrorModalOpen === 4}
				onClose={closeErrorModal}
				onAccept={closeContactAdminModal}
				closeBtn
				header={"Vous n’êtes pas bêta-testeur"}
				confirmText={"Contacter l'administrateur"}
				cancelText={"OK"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
						L'accès à la version bêta de lecoffre.io est limité à un groupe restreint d'utilisateurs autorisés.
					</Typography>
					<ul>
						<li>
							<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								Si vous êtes intéressé par la participation à notre programme de bêta-test, veuillez nous compléter le
								formulaire :{" "}
								<a
									href="https://www.lecoffre.io/contact"
									target="_blank"
									style={{ color: "blue", textDecoration: "underline" }}>
									https://www.lecoffre.io/contact
								</a>
							</Typography>
						</li>
						<div style={{ marginBottom: "10px" }}></div>
						<li>
							<Typography typo={ETypo.TEXT_MD_REGULAR} className={classes["text"]}>
								Si vous avez déjà un compte bêta-testeur, veuillez vous connecter sur{" "}
								<a
									href="https://compte.idnot.fr/home"
									target="_blank"
									style={{ color: "blue", textDecoration: "underline" }}>
									https://compte.idnot.fr/home
								</a>{" "}
								et vérifier que l'adresse mail renseignée sur votre espace est identique à celle que vous nous avez
								communiquée.
							</Typography>
						</li>
					</ul>
				</div>
			</Confirm> */}
		</div>
	);
}