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 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;
};
class UpdateFolderDescriptionClass extends BasePage<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			selectedFolder: null,
		};
		this.onSelectedFolder = this.onSelectedFolder.bind(this);
	}
	public override render(): JSX.Element {
		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 la note du dossier</Typography>

					<Form className={classes["form"]}>
						<div className={classes["content"]}>
							<InputField name="input field" fakeplaceholder="Note du dossier" textarea />
						</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 onSelectedFolder(folder: IDashBoardFolder): void {
		this.setState({ selectedFolder: folder });
	}
}

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