lecoffre-front/src/front/Components/Layouts/Folder/AddClientToFolder/index.tsx

import Customers from "@Front/Api/LeCoffreApi/SuperAdmin/Customers/Customers";
import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import Module from "@Front/Config/Module";
import { ECivility } from "le-coffre-resources/dist/Customer/Contact";
import { Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";

import BasePage from "../../Base";
import classes from "./classes.module.scss";
import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
import { TextField } from "@mui/material";

enum ESelectedOption {
	EXISTING_CUSTOMER = "existing_customer",
	NEW_CUSTOMER = "new_customer",
}
type IProps = {};
type IState = {
	selectedOption: ESelectedOption;
	availableCustomers: Customer[];
	selectedCustomers: readonly IOption[];
	existingCustomers: IOption[];
	isLoaded: boolean;
};

type IPropsClass = IProps & {
	selectedFolderUid: string;
	router: NextRouter;
};
class AddClientToFolderClass extends BasePage<IPropsClass, IState> {
	constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedOption: ESelectedOption.EXISTING_CUSTOMER,
			availableCustomers: [],
			selectedCustomers: [],
			existingCustomers: [],
			isLoaded: false,
		};
		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)"}>
				<div className={classes["root"]}>
					<div className={classes["back-arrow"]}>
						<BackArrow url={backwardPath} />
					</div>
					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
					{this.state.isLoaded && (
						<>
							<div className={classes["radiobox-container"]}>
								{this.state.availableCustomers.length !== 0 && (
									<RadioBox
										name="client"
										onChange={this.onExistingClientSelected}
										checked={this.state.selectedOption === "existing_customer"}
										value={"existing client"}>
										<Typography typo={ITypo.P_ERR_18}>Client existant</Typography>
									</RadioBox>
								)}

								<RadioBox
									name="client"
									onChange={this.onNewClientSelected}
									checked={this.state.selectedOption === "new_customer"}
									value={"new client"}>
									<Typography typo={ITypo.P_ERR_18}>Nouveau client</Typography>
								</RadioBox>
							</div>

							<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
								{this.state.selectedOption === "existing_customer" && (
									<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.selectedOption === "new_customer" && (
									<div className={classes["new-client"]}>
										<TextField name="last_name" placeholder="Nom" />
										<TextField name="first_name" placeholder="Prénom" />
										<TextField name="email" placeholder="E-mail" />
										<TextField
											name="cell_phone_number"
											placeholder="Numéro de téléphone"
										/>
										<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 preExistingCustomers: IOption[] | undefined = await this.getFolderPreSelectedCustomers(this.props.selectedFolderUid);
		const existingCustomers = preExistingCustomers ?? [];

		existingCustomers.forEach((customer) => {
			const index = availableCustomers.findIndex((availableCustomer) => availableCustomer.uid === customer.value);
			if (index !== -1) availableCustomers.splice(index, 1);
		});

		let selectedOption = ESelectedOption.EXISTING_CUSTOMER;
		if (availableCustomers.length === 0) {
			selectedOption = ESelectedOption.NEW_CUSTOMER;
		}

		this.setState({ availableCustomers, existingCustomers, isLoaded: true, selectedOption });
	}

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

	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 onExistingClientSelected(): void {
		this.setState({ selectedOption: ESelectedOption.EXISTING_CUSTOMER });
	}

	private onNewClientSelected(): void {
		this.setState({ selectedOption: ESelectedOption.NEW_CUSTOMER });
	}

	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

		const allCustomersToLink = this.state.selectedCustomers.concat(this.state.existingCustomers);
		let customersToLink: Partial<Customer>[] = allCustomersToLink.map((customer) => {
			return {
				customer: { uid: customer.value },
			};
		}) as Partial<Customer>[];

		if (this.state.selectedOption === "new_customer") {
			const customer: Customer = await Customers.getInstance().post({
				contact: values,
			});
			if (!customer.uid) return;
			customersToLink?.push({ customer: { uid: customer.uid } } as Partial<Customer>);
		}

		if (customersToLink) {
			const body = OfficeFolder.hydrate<OfficeFolder>({ customers: customersToLink.map((customer) => {
				return Customer.hydrate<Customer>(customer);
			}) });

			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} />;
}