import "reflect-metadata";

import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import DocumentNotary from "@Front/Components/DesignSystem/Document/DocumentNotary";
import FilePreview from "@Front/Components/DesignSystem/FilePreview";
import FolderContainer from "@Front/Components/DesignSystem/FolderContainer";
import FolderList from "@Front/Components/DesignSystem/FolderListContainer";
import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
import SearchBar from "@Front/Components/DesignSystem/SearchBar";
import Select, { IOption } from "@Front/Components/DesignSystem/Select";
import ToolTip from "@Front/Components/DesignSystem/ToolTip";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import UserFolder from "@Front/Components/DesignSystem/UserFolder";
import BasePage from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Toasts, { IToast } from "@Front/Stores/Toasts";

import classes from "./classes.module.scss";
import { customer2, document, documentDeposited, documentPending, folder, folders, folderWithPendingDocument } from "./dummyData";
import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";

type IState = {
	isModalDisplayed: boolean;
	selectedOption?: IOption;
};
type IProps = {};

export default class DesignSystem extends BasePage<IProps, IState> {
	constructor(props: IProps) {
		super(props);
		this.state = {
			isModalDisplayed: false,
		};
		this.openModal = this.openModal.bind(this);
		this.closeModal = this.closeModal.bind(this);
		this.onSelectedOption = this.onSelectedOption.bind(this);
	}

	public override render(): JSX.Element {
		const selectOptions: IOption[] = [
			{ value: "1", label: "Divorce" },
			{ value: "2", label: "Succession" },
			{ value: "3", label: "Vente immobilière" },
		];
		return (
			<DefaultTemplate title={"HomePage"}>
				<div className={classes["root"]}>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H1}>Website design System</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_18}>
								This page allows to gather all the design system of the site. A Design System is a library of components,
								visuals and principles with reusable code. This evolving kit offers a UX and UI repository for designers and
								developers of digital products and services. The construction of a design system offers many advantages.
								This solution facilitates the work of the teams and reduces the "design debt" and the "technical debt". The
								result is a coherent ecosystem and therefore a better experience for users and customers.
							</Typography>
						</div>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Button components</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
						<Button variant={EButtonVariant.GHOST}>Ghost</Button>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Toaster component</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY} onClick={this.spawnToast}>
							Spawn a toast
						</Button>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Modal components</Typography>
						</div>
						<Button variant={EButtonVariant.PRIMARY} onClick={this.openModal}>
							Show Modal
						</Button>

						<Confirm
							isOpen={this.state.isModalDisplayed}
							onClose={this.closeModal}
							closeBtn
							header={"Title"}
							cancelText={"Cancel"}
							confirmText={"Confirmer"}>
							Lorem ipsum dolor sit amet consectetur. Aliquam nunc lobortis lacus vulputate sagittis sed tempor eget feugiat.
							Elementum malesuada at sit elit.
						</Confirm>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>HeaderLink components</Typography>
						</div>
						<div className={classes["inline-flex"]}>
							<HeaderLink text={"Home"} path={"/"} />
							<HeaderLink text={"Design-system"} path={"/design-system"} />
						</div>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>CheckBox component</Typography>
						</div>
						<CheckBox
							toolTip="Mon super tooltip"
							option={{
								label: "Check Box 1",
								value: "box_1",
							}}
						/>
						<CheckBox
							option={{
								label: "Check Box 2",
								value: "box_2",
							}}
						/>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>RadioBox component</Typography>
						</div>
						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip" value="box_1">
							Radio Box 1
						</RadioBox>
						<RadioBox name="RadioBox" value="box_2">
							Radio Box 2
						</RadioBox>
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Tool tip component</Typography>
						</div>
						<ToolTip title="toolTip" text="tooltip content" isNotFlex={true} />
					</div>
					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Input component</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="input place hodler" />
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="text area place hodler" textarea />
						</div>
						<div className={classes["sub-section"]}>
							<InputField name="input field" fakeplaceholder="number place hodler" type="number" />
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Progress bar component</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<QuantityProgressBar currentNumber={10} total={100} title={"Complétion du dossier client"} />
						</div>
						<div className={classes["sub-section"]}>
							<QuantityProgressBar currentNumber={30} total={100} title={"Complétion du dossier client"} />
						</div>
						<div className={classes["sub-section"]}>
							<QuantityProgressBar currentNumber={70} total={100} title={"Complétion du dossier client"} />
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Folder container component</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_16}>Folder with no document to validate</Typography>
							<div className={classes["folder-conatainer"]}>
								<FolderContainer folder={folder as IDashBoardFolder} />
							</div>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_16}>Folder with document waiting for being validate</Typography>
							<div className={classes["folder-conatainer"]}>
								<FolderContainer folder={folderWithPendingDocument as IDashBoardFolder} />
							</div>
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Select component</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<div className={classes["folder-conatainer"]}>
								<Select
									options={selectOptions}
									onChange={this.onSelectedOption}
									placeholder={"Type d'acte"}
									selectedOption={this.state.selectedOption}
								/>
							</div>
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Notary Documents</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_16}>Documents ASKED</Typography>
							<div className={classes["folder-conatainer"]}>
								<DocumentNotary document={document} />
							</div>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_16}>Documents PENDING</Typography>
							<div className={classes["folder-conatainer"]}>
								<DocumentNotary document={documentPending} />
							</div>
						</div>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.P_16}>Documents VALIDATED</Typography>

							<div className={classes["folder-conatainer"]}>
								<DocumentNotary document={documentDeposited} />
							</div>
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Notary Documents</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<UserFolder customer={customer2} folder={folder as IDashBoardFolder} isOpened={true} onClose={() => {return}} onOpen={() => {return}}/>
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>MultiSelect</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<MultiSelect options={selectOptions} placeholder="Numéro CRPCEN" />
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Document SearchBar</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<SearchBar folders={folders as IDashBoardFolder[]} />
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Folder List</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<FolderList folders={folders as IDashBoardFolder[]} isArchived={false} />
						</div>
					</div>

					<div className={classes["section"]}>
						<div className={classes["sub-section"]}>
							<Typography typo={ITypo.H3}>Preview Image/Pdf</Typography>
						</div>
						<div className={classes["sub-section"]}>
							<div style={{ height: "500px" }}>
								<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Yb_Eh_X9st_F_Srq_Ve_Bj_Yb_Aj56xv_AV_Nj6_Wjypo_B4r5ubce_U_ae3303e7ab.pdf" />
							</div>
							<FilePreview href="https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/Qmf_Vgs_Vr_Mt_TDY_Xme8qhw8quiin_Co_Bo_FBA_Vc9k6_H2d1_Bh_UU_162d84281d.jpeg" />
						</div>
					</div>
				</div>
			</DefaultTemplate>
		);
	}
	private openModal() {
		this.setState({
			isModalDisplayed: true,
		});
	}
	private closeModal() {
		this.setState({
			isModalDisplayed: false,
		});
	}
	private spawnToast() {
		const toast: IToast = {
			title: "Un collaborateur veut rejoindre votre office",
			text: "12:00 - 1 fev 2023",
		};
		Toasts.getInstance().open(toast);
	}

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