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 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;
	documentName: string;
	visibleDescription: string;
};

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: null,
			isCreateDocumentModalVisible: false,
			documentName: "",
			visibleDescription: "",
		};

		this.onActTypeChange = this.onActTypeChange.bind(this);
		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 (
			<DefaultTemplate title={"Demander des documents"}>
				<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
												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>
			</DefaultTemplate>
		);
	}

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

	private addDocument() {
		console.log(this.state.documentName);
		console.log(this.state.visibleDescription);
		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({
			actType: null,
			visibleDescription: "",
			documentName: "",
		});
	}

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

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

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

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