import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import BackArrow from "@Front/Components/Elements/BackArrow";
import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Link from "next/link";
import { NextRouter, useRouter } from "next/router";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Module from "@Front/Config/Module";
import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
import { OfficeFolderHasStakeholder } from "le-coffre-resources/dist/Customer";
import { IOption } from "@Front/Components/DesignSystem/Select";
import User from "le-coffre-resources/dist/Notary";

type IPropsClass = {
	selectedFolderUid: string;
	router: NextRouter;
};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	selectedOption?: ERadioBoxValue;
	availableCollaborators: User[];
	selectedCollaborators: readonly IOption[];
};

enum ERadioBoxValue {
	ALL = "all",
	SELECTION = "selection",
}

class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
	constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedFolder: null,
			availableCollaborators: [],
			selectedCollaborators: [],
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
		this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
		this.onFormSubmit = this.onFormSubmit.bind(this);
		this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this);
	}
	public override render(): JSX.Element {		
		const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
		const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
		const selectOptions : IOption[]= this.state.availableCollaborators.map((collaborator) => {
			return {
				label: collaborator.contact.first_name + " " + collaborator.contact.last_name,
				value: collaborator.uid,
			}
		})
		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}>Modifier les collaborateurs</Typography>

					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
						<div className={classes["content"]}>
							<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}>
								Tout l'office
							</RadioBox>
							<RadioBox name="office" value={ERadioBoxValue.SELECTION} onChange={this.onSelectedOptionSpecific}>
								Sélectionner des collaborateurs
							</RadioBox>
						</div>

						{this.state.selectedOption === ERadioBoxValue.SELECTION && (
							<div className={classes["sub-content"]}>
								<MultiSelect onChange={this.onChangeSelectedCollaborators} options={selectOptions} placeholder="Collaborateurs" defaultValue={this.state.selectedCollaborators}/>
							</div>
						)}

						<div className={classes["button-container"]}>
							<Link href={backwardPath} className={classes["cancel-button"]}>
								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
							</Link>
							<Button type="submit">Enregistrer</Button>
						</div>
					</Form>
				</div>
			</DefaultNotaryDashboard>
		);
	}

	public override async componentDidMount(){
		await this.getFolderAvailableCollaborators(this.props.selectedFolderUid);
	}

	private async getFolderAvailableCollaborators(folderUid: string){
		const query = {
			q: {
				office: true,
				office_folder_has_stakeholder: {
					include: {
						user_stakeholder: {
							include: {
								contact: true,
							}
						}
					}
				},
			},
		};	

		let folder = null;
		try {
			folder = await Folders.getInstance().getByUid(folderUid, query);			
			const preSelectedCollaborators : IOption[]= folder.office_folder_has_stakeholder!.map((collaborator) => {
				return {
					label: collaborator.user_stakeholder.contact.first_name + " " + collaborator.user_stakeholder.contact.last_name,
					value: collaborator.user_stakeholder.uid,
				}
			})
			this.setState({selectedCollaborators: preSelectedCollaborators})
		} catch (error) {			
			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
			return;
		}
	
		const userQuery: IGetUsersparams = {
			where: { 
				office_uid: folder.office.uid,
			},
			include:{
				contact: {
					select:{
						first_name:true,
						last_name:true,
					}
				}
			}
		};

		const availableCollaborators = await Users.getInstance().get(userQuery);		
		this.setState({availableCollaborators});
	}

	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
		if (event.target.value !== ERadioBoxValue.ALL) return;
		this.setState({
			selectedOption: ERadioBoxValue.ALL,
		});
	}

	private onChangeSelectedCollaborators(selectedCollaborators: readonly IOption[]) {
		this.setState({ selectedCollaborators });
	}

	private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
		if (event.target.value !== ERadioBoxValue.SELECTION) return;
		this.setState({
			selectedOption: ERadioBoxValue.SELECTION,
		});
	}

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

	private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
		try {
			let collaboratorsUid : OfficeFolderHasStakeholder[];
			if(this.state.selectedOption === ERadioBoxValue.SELECTION){
				collaboratorsUid = this.state.selectedCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.value}} as OfficeFolderHasStakeholder));
			}
			else{
				collaboratorsUid = this.state.availableCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.uid}} as OfficeFolderHasStakeholder));
			}			
			await Folders.getInstance().put(this.props.selectedFolderUid, {office_folder_has_stakeholder: collaboratorsUid});
			this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid));
			
		} catch (error) {
			console.error(error)	
		}
	}
}

export default function UpdateFolderCollaborators() {
	const router = useRouter();
	let { folderUid } = router.query;
	folderUid = folderUid as string;
	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router}/>;
}