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 Select, { 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 { 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";

type IProps = {
	selectedFolderUid: string;
};
type IState = {
	selectedFolder: IDashBoardFolder | null;
	selectedOption?: IOption;
};
class UpdateFolderMetadataClass extends BasePage<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			selectedFolder: null,
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
		this.onSelectedOption = this.onSelectedOption.bind(this);
	}
	public override render(): JSX.Element {
		const selectOptions = [
			{ value: "adazzdsqaad", label: "Acte de mariage" },
			{ value: "adazzqsdaad", label: "Vente immobilière" },
			{ value: "adazzqsdaad", label: "Acte de divorce" },
		];
		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}>Modifier les informations du dossier</Typography>

					<Form className={classes["form"]}>
						<div className={classes["content"]}>
							<InputField name="input field" fakeplaceholder="Intitulé du dossier" />
							<InputField name="input field" fakeplaceholder="Numéro de dossier" />
							<Select
								options={selectOptions}
								onChange={this.onSelectedOption}
								placeholder={"Type d’acte"}
								selectedOption={this.state.selectedOption}
							/>
							<InputField name="input field" fakeplaceholder="Ouverture du dossier" />
						</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 onSelectedOption(option: IOption) {
		this.setState({
			selectedOption: option,
		});
	}

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

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