import PlusIcon from "@Assets/Icons/plus.svg";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import React from "react";

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

type IProps = {};
type IState = {
	isCreateDocumentModalVisible: boolean;
	documentName: string;
	visibleDescription: string;
};

export default class AskDocuments extends BasePage<IProps, IState> {
	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 = {
			isCreateDocumentModalVisible: false,
			documentName: "",
			visibleDescription: "",
		};

		this.onFormSubmit = this.onFormSubmit.bind(this);
		this.closeModal = this.closeModal.bind(this);
		this.openModal = this.openModal.bind(this);
		this.cancel = this.cancel.bind(this);
		this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this);
		this.onDocumentNameChange = this.onDocumentNameChange.bind(this);
		this.addDocument = this.addDocument.bind(this);
		this.canAddDocument = this.canAddDocument.bind(this);
	}

	public override render(): JSX.Element {
		return (
			<DefaultNotaryDashboard title={"Demander des documents"} onSelectedFolder={() => {}}>
				<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"]}>
							<div className={classes["checkbox-container"]}>
								{this.documentsType.map((documentType) => (
									<CheckBox toolTip="Checkbox with tooltip" option={documentType} key={documentType.value as string} />
								))}
							</div>
							<div className={classes["add-document-container"]}>
								<Button
									icon={PlusIcon}
									iconposition={"right"}
									iconstyle={{ transform: "rotate(180deg)", width: "22px", height: "22px" }}
									variant={EButtonVariant.LINE}
									onClick={this.openModal}>
									Ajouter un document
								</Button>
							</div>
							<div className={classes["buttons-container"]}>
								<Button variant={EButtonVariant.GHOST} onClick={this.cancel}>
									Annuler
								</Button>
								<Button type="submit">Valider</Button>
							</div>
						</div>
					</Form>
					<Confirm
						isOpen={this.state.isCreateDocumentModalVisible}
						onClose={this.closeModal}
						onAccept={this.addDocument}
						canConfirm={this.canAddDocument()}
						closeBtn
						header={"Créer un type de document"}
						cancelText={"Annuler"}
						confirmText={"Ajouter"}>
						<div className={classes["add-document-form-container"]}>
							<InputField
								name="document_name"
								fakeplaceholder="Nom du document à ajouter"
								type="text"
								onChange={this.onDocumentNameChange}
							/>
							<InputField
								name="description"
								fakeplaceholder="Description visible par le client"
								type="text"
								textarea
								onChange={this.onVisibleDescriptionChange}
							/>
						</div>
					</Confirm>
				</div>
			</DefaultNotaryDashboard>
		);
	}

	private canAddDocument() {
		if (this.state.documentName === "" || this.state.visibleDescription === "") {
			return false;
		}
		return true;
	}

	private addDocument() {
		this.setState({
			isCreateDocumentModalVisible: false,
			documentName: "",
			visibleDescription: "",
		});
	}

	private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({
			visibleDescription: e.target.value,
		});
	}

	private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement>) {
		this.setState({
			documentName: e.target.value,
		});
	}

	private cancel() {
		this.setState({
			visibleDescription: "",
			documentName: "",
		});
	}

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

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

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