import LandingImage from "../Login/landing-connect.jpeg";
import Image from "next/image";
import CoffreIcon from "@Assets/Icons/coffre.svg";
import { useRouter } from "next/router";
import React, { useEffect } from "react";
import classes from "./classes.module.scss";
import Module from "@Front/Config/Module";
import Auth from "@Front/Api/Auth/IdNot";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Loader from "@Front/Components/DesignSystem/Loader";
import UserStore from "@Front/Stores/UserStore";

export default function LoginCallBack() {
	const router = useRouter();

	useEffect(() => {
		async function getUser() {
			const code = router.query["code"];
			if (!code) return;
			try {
				const token = await Auth.getInstance().getIdnotJwt(code as string);
				await UserStore.instance.connect(token.accessToken, token.refreshToken);
				return router.push(Module.getInstance().get().modules.pages.Folder.props.path);
			} catch (e) {
				console.error(e);
				return;
			}
		}
		getUser();
	}),
		[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 professionnel</div>
				</Typography>
				<div className={classes["loader"]}>
					<Loader />
				</div>
				<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>
	);
}