import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Form from "@Front/Components/DesignSystem/Form";
import Select, { IOptionOld } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import Typography, { ETypo } 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 { OfficeFolder } from "le-coffre-resources/dist/Notary";
import Link from "next/link";
import { useRouter } from "next/router";

import BasePage from "../../Base";
import classes from "./classes.module.scss";

type IProps = {
	selectedFolderUid: string;
};
type IState = {
	selectedFolder: OfficeFolder | null;
	selectedOption?: IOptionOld;
};
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)"}>
				<div className={classes["root"]}>
					<div className={classes["back-arrow"]}>
						<BackArrow url={backwardPath} />
					</div>
					<Typography typo={ETypo.TITLE_H1}>Modifier les informations du dossier</Typography>

					<Form className={classes["form"]}>
						<div className={classes["content"]}>
							<TextField name="input field" placeholder="Intitulé du dossier" />
							<TextField name="input field" placeholder="Numéro de dossier" />
							<Select
								name="deed"
								options={selectOptions}
								onChange={this.onSelectedOption}
								placeholder={"Type d'acte"}
								selectedOption={this.state.selectedOption}
							/>
							<TextField name="input field" placeholder="Ouverture du dossier" />
						</div>

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

	private onSelectedOption(option: IOptionOld) {
		this.setState({
			selectedOption: option,
		});
	}

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

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