import React from "react";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Form from "@Front/Components/DesignSystem/Form";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ValidationError } from "class-validator";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
type IProps = {
	onSubmit: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
	validationErrors: ValidationError[];
	onPasswordForgotClicked: () => void;
};

export default function StepPassword(props: IProps) {
	const { onSubmit, validationErrors, onPasswordForgotClicked } = props;
	const [isModalOpened, setIsModalOpened] = React.useState(false);

	const closeModal = () => {
		setIsModalOpened(false);
	};

	const openModal = () => {
		setIsModalOpened(true);
	};

	const onModalAccept = () => {
		onPasswordForgotClicked();
		setIsModalOpened(false);
	};

	return (
		<div className={classes["root"]}>
			<Typography typo={ITypo.H1}>
				<div className={classes["title"]}>Entrez votre mot de passe</div>
			</Typography>
			<Form className={classes["form"]} onSubmit={onSubmit}>
				<TextField
					placeholder="Mot de passe"
					name="password"
					validationError={validationErrors.find((error) => error.property === "password")}
					password
				/>
				<div onClick={openModal}>
					<Typography typo={ITypo.P_16} className={classes["forgot-password"]}>
						Mot de passe oublié ?
					</Typography>
				</div>
				<Button type="submit" variant={EButtonVariant.PRIMARY} className={classes["submit_button"]}>
					Valider
				</Button>
			</Form>
			<Confirm
				isOpen={isModalOpened}
				onClose={closeModal}
				showCancelButton={true}
				onAccept={onModalAccept}
				closeBtn
				header={"Mot de passe oublié ?"}
				confirmText={"Valider"}
				cancelText={"Annuler"}>
				<div className={classes["modal-content"]}>
					<Typography typo={ITypo.P_16} className={classes["text"]}>
						Un code à usage unique va vous être envoyé par sms pour réinitialiser votre mot de passe.
					</Typography>
				</div>
			</Confirm>
		</div>
	);
}