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 } from "react";
import Customers from "@Front/Api/LeCoffreApi/Id360/Customers/Customers";
import classes from "./classes.module.scss";
import LandingImage from "./landing-connect.jpeg";

export default function Login() {
	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]);

	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 client</div>
				</Typography>
				<Button onClick={redirectCustomerOnConnection} icon={idNoteLogo} iconposition={"left"}>
					S'identifier en tant que customer
				</Button>
				<Typography typo={ITypo.P_18}>
					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
				</Typography>
				<Button variant={EButtonVariant.LINE}>Contacter l'administrateur</Button>
			</div>
		</DefaultDoubleSidePage>
	);
}