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 { useRouter } from "next/router";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Module from "@Front/Config/Module";

type IPropsClass = {
	selectedFolderUid: string;
};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	selectedOption?: ERadioBoxValue;
};

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

class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
	constructor(props: IPropsClass) {
		super(props);
		this.state = {
			selectedFolder: null,
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
		this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.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 = [
			{ value: "adazzdsqaad", label: "John Doe" },
			{ value: "azdzafzad", label: "Jahn Doe" },
			{ value: "azdazkdazoaz", label: "Marcelino Doe" },
		];
		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"]}>
						<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 options={selectOptions} placeholder="Collaborateurs" />
							</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>
		);
	}

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

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

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