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 MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import { IOption } from "@Front/Components/DesignSystem/Select";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import { NextRouter, useRouter } from "next/router";

import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
import Module from "@Front/Config/Module";
import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
import { Customer } from "le-coffre-resources/dist/Notary";

type IProps = {};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	isExistingClientSelected: boolean;
	isNewClientSelected: boolean;
	availableCustomers: Customer[] | null;
	selectedCustomers: readonly IOption[];
};

type IPropsClass = IProps & {
	selectedFolderUid: string;
	router: NextRouter;
};
class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
	constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedFolder: null,
			isExistingClientSelected: true,
			isNewClientSelected: false,
			availableCustomers: [],
			selectedCustomers: [],
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
		this.onNewClientSelected = this.onNewClientSelected.bind(this);
		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
		this.onFormSubmit = this.onFormSubmit.bind(this);
	}
	public override render(): JSX.Element {
		const selectOptions: IOption[] = this.getSelectedOptions();

		const backwardPath = Module.getInstance()
			.get()
			.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
		return (
			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
				<div className={classes["root"]}>
					<div className={classes["back-arrow"]}>
						<BackArrow url={backwardPath} />
					</div>
					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
					<div className={classes["radiobox-container"]}>
						<RadioBox
							name="client"
							onChange={this.onExistingClientSelected}
							defaultChecked={this.state.isExistingClientSelected}
							value={"existing client"}>
							<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
						</RadioBox>
						<RadioBox
							name="client"
							onChange={this.onNewClientSelected}
							defaultChecked={this.state.isNewClientSelected}
							value={"new client"}>
							<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
						</RadioBox>
					</div>

					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
						{this.state.isExistingClientSelected && (
							<div className={classes["existing-client"]}>
								<MultiSelect
									options={selectOptions}
									placeholder="Clients"
									onChange={this.onMutiSelectChange}
									defaultValue={this.state.selectedCustomers}
								/>
								<div className={classes["button-container"]}>
									<Link href={backwardPath} className={classes["cancel-button"]}>
										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
									</Link>
									<Button type="submit">Associer au dossier</Button>
								</div>
							</div>
						)}

						{this.state.isNewClientSelected && (
							<div className={classes["new-client"]}>
								<InputField name="last_name" fakeplaceholder="Nom" />
								<InputField name="first_name" fakeplaceholder="Prénom" />
								<InputField name="email" fakeplaceholder="E-mail" isEmail />
								<InputField name="cell_phone_number" fakeplaceholder="Numéro de téléphone" numbersOnly maxLength={10} />
								<div className={classes["button-container"]}>
									<Link href={backwardPath} className={classes["cancel-button"]}>
										<Button variant={EButtonVariant.GHOST}>Annuler</Button>
									</Link>
									<Button type="submit">Associer au dossier</Button>
								</div>
							</div>
						)}
					</Form>
				</div>
			</DefaultNotaryDashboard>
		);
	}

	public override async componentDidMount() {
		const query = {};
		const availableCustomers = await Customers.getInstance().get(query);
		let preSelectedCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
		const selectedCustomers = preSelectedCustomers ?? [];
		this.setState({ availableCustomers, selectedCustomers });
	}

	private async getFolderPreSelectedCustomers(folderUid: string): Promise<IOption[] | undefined> {
		const query = {
			q: {
				office_folder_has_customers: {
					include: {
						customer: {
							include: {
								contact: true,
							},
						},
					},
				},
			},
		};
		let preSelectedCustomers: IOption[] = [];
		try {
			const folder = await Folders.getInstance().getByUid(folderUid, query);
			preSelectedCustomers = folder.office_folder_has_customers!.map((folderHasCustomer) => {
				return {
					label: folderHasCustomer.customer.contact?.first_name + " " + folderHasCustomer.customer.contact?.last_name,
					value: folderHasCustomer.customer.uid,
				};
			});
		} catch (error) {
			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
			return;
		}
		return preSelectedCustomers;
	}

	private getSelectedOptions(): IOption[] {
		let options = this.state.availableCustomers?.map((customer) => {
			return {
				label: customer.contact?.first_name + " " + customer.contact?.last_name,
				value: customer.uid,
			};
		});
		if (!options) options = [];
		return options;
	}

	private onMutiSelectChange(selectedCustomers: readonly IOption[]): void {
		this.setState({ selectedCustomers });
	}

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

	private onExistingClientSelected(): void {
		this.setState({ isExistingClientSelected: true, isNewClientSelected: false });
	}

	private onNewClientSelected(): void {
		this.setState({ isExistingClientSelected: false, isNewClientSelected: true });
	}

	private async onFormSubmit(
		e: React.FormEvent<HTMLFormElement> | null,
		values: {
			[key: string]: any;
		},
	) {
		values["civility"] = ECivility.MALE; // TODO: should maybe be deleted later or added to the form

		let customersToLink: IPutFoldersParams["office_folder_has_customers"] = this.state.selectedCustomers.map((customer) => {
			return {
				customer: { uid: customer.value },
			};
		}) as IPutFoldersParams["office_folder_has_customers"];

		if (this.state.isNewClientSelected) {
			const customer: Customer = await Customers.getInstance().post({
				contact: values,
			});
			if (!customer.uid) return;
			customersToLink?.push({ customer: { uid: customer.uid } });
		}

		if (customersToLink) {
			const body = {
				office_folder_has_customers: customersToLink,
			};

			await Folders.getInstance().put(this.props.selectedFolderUid, body);
			this.props.router.push(`/folders/${this.props.selectedFolderUid}`);
		}
	}
}

export default function AddClientToFolder(props: IProps) {
	const router = useRouter();
	let { folderUid } = router.query;
	folderUid = folderUid as string;
	return <AddClientToFolderClass {...props} selectedFolderUid={folderUid} router={router} />;
}