import CoffreIcon from "@Assets/Icons/coffre.svg";
import idNoteLogo from "@Assets/Icons/id-note-logo.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Image from "next/image";
import { useRouter } from "next/router";
import { useCallback, useEffect, useState } from "react";

import classes from "./classes.module.scss";
import LandingImage from "./landing-connect.jpeg";
import { FrontendVariables } from "@Front/Config/VariablesFront";
import Link from "next/link";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";

export default function Login() {
	const router = useRouter();
	const error = router.query["error"];

	const [isErrorModalOpen, setIsErrorModalOpen] = useState(0);

	const redirectUserOnConnection = useCallback(() => {
		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]);

	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 (
		<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
			<div className={classes["root"]}>
				<Image alt="coffre" src={CoffreIcon} />
				<Typography typo={ITypo.H1}>
					<div className={classes["title"]}>Connexion espace professionnel</div>
				</Typography>
				<Button onClick={redirectUserOnConnection} icon={idNoteLogo} iconposition={"left"}>
					S'identifier avec ID.not
				</Button>
				<Typography typo={ITypo.P_18}>
					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
				</Typography>
				<Link href="mailto:g.texier@notaires.fr">
					<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
				</Link>
			</div>
			<Confirm
				isOpen={isErrorModalOpen === 1}
				onClose={closeErrorModal}
				showCancelButton={false}
				onAccept={closeErrorModal}
				closeBtn
				header={"Erreur"}
				confirmText={"OK"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ITypo.P_16} className={classes["text"]}>
						Vous ne disposez pas d'un abonnement, veuillez contacter l'administrateur de votre office.
					</Typography>
				</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={ITypo.P_16} className={classes["text"]}>
						Veuillez vous reconnecter.
					</Typography>
				</div>
			</Confirm>
			<Confirm
				isOpen={isErrorModalOpen === 3}
				onClose={closeErrorModal}
				onAccept={closeNoEmailModal}
				closeBtn
				header={"Echec de connexion"}
				confirmText={"Accéder à mon compte ID.not"}
				cancelText={"OK"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ITypo.P_16} className={classes["text"]}>
						Votre compte ID.not doit être associé à une adresse email @notaires.fr (onglet Mettre à jour mes données
						professionnelles)
					</Typography>
				</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={ITypo.P_16} 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={ITypo.P_16} 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={ITypo.P_16} 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>
		</DefaultDoubleSidePage>
	);
}