import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BasePage from "../Base";
import classes from "./classes.module.scss";
import LandingImage from "./landing-connect.png";
import Image from "next/image";
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
import FranceConnectIcon from "./france-connect.svg";
import ExportIcon from "@Assets/Icons/export.svg";
import { FrontendVariables } from "@Front/Config/VariablesFront";
import cryptoRandomString from "crypto-random-string";

export default class LoginCustomer extends BasePage {
	public override render(): JSX.Element {
		return (
			<DefaultDoubleSidePage title={"Login"} image={LandingImage}>
				<div className={classes["root"]}>
					<Typography typo={ITypo.H1}>
						<div className={classes["title"]}>Identifiez-vous</div>
					</Typography>
					<Typography typo={ITypo.P_16}>
						<div className={classes["text"]}>
							Pour accéder à votre espace de dépôt des documents, veuillez vous identifier avec FranceConnect.
						</div>
					</Typography>
					<Image
						alt="france connect"
						src={FranceConnectIcon}
						onClick={this.redirectUserOnConnection}
						className={classes["france-connect-button"]}></Image>
					<div className={classes["what-is-france-connect"]}>
						<div>Qu’est-ce que FranceConnect ?</div>
						<Image alt="export" src={ExportIcon}></Image>
					</div>
				</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.FC_AUTHORIZE_ENDPOINT;
		const clientId = variables.FC_CLIENT_ID;
		const url = `${authorizeEndPoint}?client_id=${clientId}&redirect_uri=http://localhost:8080/login-callback&scope=openid&response_type=code&state=${cryptoRandomString({length: 64})}&nonce=${cryptoRandomString({length: 64})}&acr_values=eidas1`;
		window.location.assign(url);
	}
}