import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BasePage from "../Base";
import classes from "./classes.module.scss";
import CoffreIcon from "@Assets/Icons/coffre.svg";
import LandingImage from "./landing-connect.png";
import Image from "next/image";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import { FrontendVariables } from "@Front/Config/VariablesFront";

export default class LoginClass extends BasePage {
	public override render(): JSX.Element {
		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={this.redirectUserOnConnection}>S’identifier avec ID.not</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>
		);
	}

	private redirectUserOnConnection() {
		const variables = FrontendVariables.getInstance();
		const baseFronturl =
			variables.BACK_API_PROTOCOL + variables.FRONT_APP_HOST + (variables.FRONT_APP_PORT ? ":" + variables.FRONT_APP_PORT : "");
		const authorizeEndPoint = variables.IDNOT_AUTHORIZE_ENDPOINT;
		const clientId = variables.IDNOT_CLIENT_ID;
		const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=${baseFronturl}/authorized-client&scope=openid,profile,offline_access&response_type=code`;
		window.location.assign(url);
	}
}