import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
//import Image from "next/image";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
//import franceConnectLogo from "../france-connect.svg";
// import { useRouter } from "next/router";
// import Customers from "@Front/Api/Auth/Id360/Customers/Customers";
import { ValidationError } from "class-validator";
type IProps = {
	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
	validationErrors: ValidationError[];
};

export default function StepEmail(props: IProps) {
	const { onSubmit, validationErrors } = props;
	/* 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 (
		<div className={classes["root"]}>
			<Typography typo={ITypo.DISPLAY_LARGE}>
				<div className={classes["title"]}>Identifiez-vous</div>
			</Typography>
			{/* <Typography typo={ITypo.TEXT_MD_REGULAR}>Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.</Typography>
			<Image alt="france-connect" src={franceConnectLogo} onClick={redirectCustomerOnConnection} className={classes["logo"]} />
			<div className={classes["what_is_france_connect"]}>Qu'est ce que FranceConnect ?</div>
			<Typography className={classes["or"]} typo={ITypo.TEXT_MD_REGULAR}>
				Ou
			</Typography> */}
			<Typography typo={ITypo.TEXT_MD_REGULAR}>
				Pour accéder à votre espace de dépôt des documents, veuillez vous identifier.{" "}
			</Typography>
			<Form className={classes["form"]} onSubmit={onSubmit}>
				<TextField
					placeholder="E-mail"
					name="email"
					validationError={validationErrors.find((error) => error.property === "email")}
				/>
				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
					Suivant
				</Button>
			</Form>
			{/* <Typography typo={ITypo.TEXT_LG_REGULAR}>
					<div className={classes["forget-password"]}>Vous n'arrivez pas à vous connecter ?</div>
				</Typography>
				<Link href="mailto:support@lecoffre.io">
					<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>Contacter l'administrateur</Button>
				</Link> */}
		</div>
	);
}