import BasePage from "@Front/Components/Layouts/Base";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import classes from "./classes.module.scss";
import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import Toasts, { IToast } from "@Front/Stores/Toasts";
import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
import HeaderLink from "@Front/Components/DesignSystem/Header/HeaderLink";

type IState = {
	isModalDisplayed: boolean;
};
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);
	}

	public override render(): JSX.Element {
		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>
			</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);
	}
}