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);
	}, []);

	useEffect(() => {
		switch (error) {
			case "1":
				openErrorModal(1);
				break;
			case "2":
				openErrorModal(2);
				break;
			default:
				break;
		}
	}, [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"]}>
						Une erreur est survenue lors de la connexion. Veuillez réessayer.
					</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>
		</DefaultDoubleSidePage>
	);
}