import Button from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import React from "react";

import BasePage from "../../Base";
import classes from "./classes.module.scss";

type IProps = {};
type IState = {
	actType: IOption | null;
	isCreateDocumentModalVisible: boolean;
};

export default class AskDocuments extends BasePage<IProps, IState> {
	private actsOptions: IOption[] = [
		{ label: "Divorce", value: "divorce" },
		{ label: "Succession", value: "succession" },
		{ label: "Vente immobilière", value: "vente_immobiliere" },
	];

	private documentsType: IOption[] = [
		{ label: "Carte d'identité", value: "carte_identite" },
		{ label: "Diagnostic État Risques et Pollution", value: "diagnostic_erep" },
		{ label: "Justificatif de domicile", value: "justificatif_domicile" },
		{ label: "Diagnostic gaz", value: "diagnostic_gaz" },
		{ label: "Compromis de vente", value: "compromis_de_vente" },
		{ label: "Diagnostic DPE", value: "diagnostic_dpe" },
		{ label: "Diagnostic électrique", value: "diagnostic_electrique" },
		{ label: "Diagnostic plombs", value: "diagnostic_plombs" },
		{ label: "Diagnostic amiante", value: "diagnostic_amiante" },
		{ label: "Diagnostic termites", value: "diagnostic_termites" },
		{ label: "Diagnostic État des nuisances sonores aériennes", value: "diagnostic_ednsa" },
	];

	public constructor(props: IProps) {
		super(props);

		this.state = {
			actType: {
				label: "Divorce",
				value: "divorce",
			},
			isCreateDocumentModalVisible: true,
		};

		this.onActTypeChange = this.onActTypeChange.bind(this);
		this.onFormSubmit = this.onFormSubmit.bind(this);
		this.closeModal = this.closeModal.bind(this);
		this.openModal = this.openModal.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<DefaultTemplate title={"Dossier"}>
				<div className={classes["root"]}>
					<BackArrow />
					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
						Demander des documents
					</Typography>
					<Form onSubmit={this.onFormSubmit}>
						<div className={classes["form-container"]}>
							{!this.state.actType && (
								<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
							)}
							{this.state.actType && (
								<div className={classes["checkbox-container"]}>
									{this.documentsType.map((documentType) => (
										<CheckBox
											name="document_type"
											toolTip="Checkbox with tooltip"
											option={documentType}
											key={documentType.value as string}
										/>
									))}
								</div>
							)}
						</div>
					</Form>
					<Button type="submit" onClick={this.openModal}>
						Open modal
					</Button>
					<Confirm
						isOpen={this.state.isCreateDocumentModalVisible}
						onClose={this.closeModal}
						onAccept={() => {}}
						closeBtn
						header={"Créer un type de document"}
						cancelText={"Annuler"}
						confirmText={"Ajouter"}>
						Blabla
					</Confirm>
				</div>
			</DefaultTemplate>
		);
	}

	private openModal() {
		this.setState({
			isCreateDocumentModalVisible: true,
		});
	}

	private closeModal() {
		this.setState({
			isCreateDocumentModalVisible: false,
		});
	}

	private onActTypeChange(selectedOption: IOption) {
		this.setState({
			actType: selectedOption,
		});
	}

	private onFormSubmit(
		e: React.FormEvent<HTMLFormElement> | null,
		values: {
			[key: string]: string;
		},
		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
	) {}
}
