import "reflect-metadata";

import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { Contact } from "le-coffre-resources/dist/Customer";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import { ChangeEvent } from "react";

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

type IProps = {};

type IPropsClass = IProps & {
	selectedFolderUid: string;
	router: NextRouter;
	client: Contact | null;
};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	inputNameValue: string;
	inputFirstNameValue: string;
	inputEmailValue: string;
	inputPhoneNumberValue: string;
	isOpenLeavingModal: boolean;
	doesInputHaveValues: boolean;
	inputBirthdate: Date | null;
	inputAddress: string;
};
class UpdateClientClass extends BasePage<IPropsClass, IState> {
	constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedFolder: null,
			inputNameValue: "",
			inputFirstNameValue: "",
			inputEmailValue: "",
			inputPhoneNumberValue: "",
			isOpenLeavingModal: false,
			doesInputHaveValues: false,
			inputBirthdate: null,
			inputAddress: "",
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onChangeNameInput = this.onChangeNameInput.bind(this);
		this.onChangeFirstNameInput = this.onChangeFirstNameInput.bind(this);
		this.onChangeEmailInput = this.onChangeEmailInput.bind(this);
		this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
		this.openLeavingModal = this.openLeavingModal.bind(this);
		this.closeLeavingModal = this.closeLeavingModal.bind(this);
		this.leavePage = this.leavePage.bind(this);
		this.onChangeBirthDateInput = this.onChangeBirthDateInput.bind(this);
		this.onChangeAddressInput = this.onChangeAddressInput.bind(this);
	}

	private backwardPath = Module.getInstance()
		.get()
		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);

	public override render(): JSX.Element {
		return (
			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
				<div className={classes["root"]}>
					<div className={classes["back-arrow"]}>
						<BackArrow url={this.backwardPath} />
					</div>
					<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
					<Form className={classes["form"]}>
						<div className={classes["content"]}>
							<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} defaultValue={this.props.client?.first_name}/>
							<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput}  defaultValue={this.props.client?.last_name}/>
							<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput}  defaultValue={this.props.client?.email}/>
							<InputField
								name="input field"
								fakeplaceholder="Numéro de téléphone"
								isPositiveNumber
								onChange={this.onChangePhoneNumberInput}
								defaultValue={this.props.client?.phone_number}
							/>
							<InputField
								name="birthdate"
								type="date"
								fakeplaceholder="Date de naissance"
								required={false}
								onChange={this.onChangeBirthDateInput}
							/>
							<InputField
								name="address"
								type="text"
								fakeplaceholder="Adresse"
								required={false}
								onChange={this.onChangeAddressInput}
							/>
						</div>

						<div className={classes["button-container"]}>
							{!this.doesInputsHaveValues() ? (
								<Link href={this.backwardPath} className={classes["cancel-button"]}>
									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
								</Link>
							) : (
								<Button variant={EButtonVariant.GHOST} onClick={this.openLeavingModal} className={classes["cancel-button"]}>
									Annuler
								</Button>
							)}
							<Button type="submit">Enregistrer</Button>
						</div>
					</Form>
					<Confirm
						isOpen={this.state.isOpenLeavingModal}
						onClose={this.closeLeavingModal}
						closeBtn
						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
						cancelText={"Annuler"}
						confirmText={"Quitter"}
						onAccept={this.leavePage}>
						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
					</Confirm>
				</div>
			</DefaultNotaryDashboard>
		);
	}

	private leavePage() {
		this.props.router.push(this.backwardPath);
	}

	private openLeavingModal(): void {
		this.setState({ isOpenLeavingModal: true });
	}

	private closeLeavingModal(): void {
		this.setState({ isOpenLeavingModal: false });
	}

	private onChangeBirthDateInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputBirthdate: new Date(event.target.value) });
	}

	private onChangeAddressInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputAddress: event.target.value });
	}

	private onChangeNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputNameValue: event.target.value });
	}

	private onChangeFirstNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputFirstNameValue: event.target.value });
	}
	private onChangeEmailInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputEmailValue: event.target.value });
	}
	private onChangePhoneNumberInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
		this.setState({ inputPhoneNumberValue: event.target.value });
	}

	private onSelectedFolder(folder: IDashBoardFolder): void {
		this.setState({ selectedFolder: folder });
	}

	private doesInputsHaveValues(): boolean {
		const doesInputsHaveValues: boolean =
			this.state.inputNameValue !== "" ||
			this.state.inputFirstNameValue !== "" ||
			this.state.inputEmailValue !== "" ||
			this.state.inputPhoneNumberValue !== "";
		return doesInputsHaveValues;
	}
}

export default function UpdateClient(props: IProps) {
	const router = useRouter();
	let { folderUid, clientUid } = router.query;
	folderUid = folderUid as string;

	let client = null;
	const folder = folders.find((folder) => folder.uid === folderUid) ?? null;
	if (folder && folder.office_folder_has_customers) {
		client = folder.office_folder_has_customers.find((client) => client.customer.contact.uid === clientUid) ?? null;
	}
	return <UpdateClientClass {...props} router={router} selectedFolderUid={folderUid} client={client?.customer.contact ?? null} />;
}