import Button, { EButtonSize, EButtonStyleType, EButtonColor } from "@Front/Components/DesignSystem/Button";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
import Table from "@Front/Components/DesignSystem/Table";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";

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

export default function DesignSystem() {
	return (
		<DefaultTemplate title={"DesignSystem"}>
			<Newsletter isOpen />
			<div className={classes["root"]}>
				<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
				<div className={classes["components"]}>
					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
					<div className={classes["rows"]}>
						<CircleProgress percentage={0} />
						<CircleProgress percentage={30} />
						<CircleProgress percentage={60} />
						<CircleProgress percentage={100} />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
					<div className={classes["rows"]}>
						<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
						<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
						<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
					<div className={classes["rows"]}>
						<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
						<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
						<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Table</Typography>
					<Table
						className={classes["table"]}
						header={[
							{
								key: "name",
								title: "Nom",
							},
							{
								key: "firstname",
								title: "Prénom",
							},
							{
								key: "button",
							},
						]}
						rows={[
							{
								key: "1",
								name: "Doe",
								firstname: "John",
								button: (
									<Button size={EButtonSize.SM} variant={EButtonColor.PRIMARY}>
										Send email
									</Button>
								),
							},
							{
								key: "2",
								name: "Doe",
								firstname: "Jane",
								button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
							},
							{
								key: "3",
								name: "Doe",
								firstname: "Jack",
								button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
							},
						]}
					/>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.PRIMARY}>PRIMARY</Button>
						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
							PRIMARY
						</Button>
						<Button variant={EButtonColor.PRIMARY} styleType={EButtonStyleType.TEXT}>
							PRIMARY
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.SECONDARY}>SECONDARY</Button>
						<Button variant={EButtonColor.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
							SECONDARY
						</Button>
						<Button variant={EButtonColor.SECONDARY} styleType={EButtonStyleType.TEXT}>
							SECONDARY
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.NEUTRAL}>NEUTRAL</Button>
						<Button variant={EButtonColor.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
							NEUTRAL
						</Button>
						<Button variant={EButtonColor.NEUTRAL} styleType={EButtonStyleType.TEXT}>
							NEUTRAL
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.ERROR}>ERROR</Button>
						<Button variant={EButtonColor.ERROR} styleType={EButtonStyleType.OUTLINED}>
							ERROR
						</Button>
						<Button variant={EButtonColor.ERROR} styleType={EButtonStyleType.TEXT}>
							ERROR
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.WARNING}>WARNING</Button>
						<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.OUTLINED}>
							WARNING
						</Button>
						<Button variant={EButtonColor.WARNING} styleType={EButtonStyleType.TEXT}>
							WARNING
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.SUCCESS}>SUCCESS</Button>
						<Button variant={EButtonColor.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
							SUCCESS
						</Button>
						<Button variant={EButtonColor.SUCCESS} styleType={EButtonStyleType.TEXT}>
							SUCCESS
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonColor.INFO}>INFO</Button>
						<Button variant={EButtonColor.INFO} styleType={EButtonStyleType.OUTLINED}>
							INFO
						</Button>
						<Button variant={EButtonColor.INFO} styleType={EButtonStyleType.TEXT}>
							INFO
						</Button>
					</div>
				</div>
			</div>
		</DefaultTemplate>
	);
}