import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
import BasePage from "../../Base";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { ActionMeta, MultiValue } from "react-select";
import { IOption } from "@Front/Components/DesignSystem/Select";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import Form from "@Front/Components/DesignSystem/Form";
import { useRouter } from "next/router";
import BackArrow from "@Front/Components/Elements/BackArrow";

type IProps = {
	selectedFolderUid: string;
};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	isExistingClientSelected: boolean;
	isNewClientSelected: boolean;
	hasNewClientSelected: boolean;
};
class AddClientToFolderClass extends BasePage<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			selectedFolder: null,
			isExistingClientSelected: true,
			isNewClientSelected: false,
			hasNewClientSelected: false,
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onExistingClientSelected = this.onExistingClientSelected.bind(this);
		this.onNewClientSelected = this.onNewClientSelected.bind(this);
		this.onMutiSelectChange = this.onMutiSelectChange.bind(this);
	}
	public override render(): JSX.Element {
		const selectOptions = [
			{ value: "adazzdsqaad", label: "john Doe" },
			{ value: "adazzqsdaad", label: "jane Doe" },
			{ value: "adazzqsdaad", label: "Marcelino Doe" },
		];
		return (
			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
				<div className={classes["root"]}>
					<div className={classes["back-arrow"]}>
						<BackArrow url={"/dossier/".concat(this.props.selectedFolderUid)} />
					</div>
					<Typography typo={ITypo.H1Bis}>Associer un ou plusieurs client(s)</Typography>
					<Form>
						<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>

						{this.state.isExistingClientSelected && (
							<div className={classes["existing-client"]}>
								<MultiSelect options={selectOptions} placeholder="Client" onChange={this.onMutiSelectChange} />
								<div className={classes["button-container"]}>
									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
									<Button disabled={!this.state.hasNewClientSelected ? true : false} type="submit">
										Associer au dossier
									</Button>
								</div>
							</div>
						)}

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

	private onMutiSelectChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>): void {
		if (newValue.length <= 0) {
			this.setState({ hasNewClientSelected: false });
			return;
		}
		this.setState({ hasNewClientSelected: true });
	}

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

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