import Button, { EButtonSize, EButtonstyletype, EButtonVariant } 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 Tabs from "@Front/Components/Elements/Tabs";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import { ArrowLongLeftIcon, ArrowLongRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
import { useCallback, useMemo, useState } from "react";

import classes from "./classes.module.scss";
import useOpenable from "@Front/Hooks/useOpenable";
import Modal from "@Front/Components/DesignSystem/Modal";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";

export default function DesignSystem() {
	const { isOpen, open, close } = useOpenable();
	const userDb = useMemo(
		() => [
			{
				username: "Maxime",
				id: 1,
			},
			{
				username: "Vincent",
				id: 2,
			},
			{
				username: "Massi",
				id: 3,
			},
			{
				username: "Maxime",
				id: 4,
			},
			{
				username: "Arnaud",
				id: 5,
			},
		],
		[],
	);

	const userDbArray = useMemo(
		() =>
			userDb.map((user) => ({
				label: user.username,
				key: user.id.toString(),
				value: user,
			})),
		[userDb],
	);

	const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);

	const onSelect = useCallback((value: (typeof userDb)[number]) => {
		setSelectedTab(value);
	}, []);

	return (
		<DefaultTemplate title={"DesignSystem"}>
			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
			<Newsletter isOpen />
			<div className={classes["root"]}>
				<div className={classes["components"]}>
					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
					<Button onClick={open}>Open Modal</Button>
					<Modal
						isOpen={isOpen}
						onClose={close}
						title={"Modal"}
						firstButton={{ text: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						secondButton={{ text: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
						<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
					</Modal>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
					<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
					<Typography typo={ETypo.TEXT_MD_REGULAR}>
						{selectedTab.id} - {selectedTab.username}
					</Typography>

					<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={EButtonVariant.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 leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.PRIMARY}>
							Primary
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.OUTLINED}>
							Primary
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.TEXT}>
							Primary
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SECONDARY}>
							Secondary
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.OUTLINED}>
							Secondary
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.TEXT}>
							Secondary
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.NEUTRAL}>
							Neutral
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.OUTLINED}>
							Neutral
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.TEXT}>
							Neutral
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.ERROR}>
							Error
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.OUTLINED}>
							Error
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.TEXT}>
							Error
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.WARNING}>
							Warning
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.OUTLINED}>
							Warning
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.TEXT}>
							Warning
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.SUCCESS}>
							Success
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.OUTLINED}>
							Success
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.TEXT}>
							Success
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button leftIcon={<ArrowLongLeftIcon />} rightIcon={<ArrowLongRightIcon />} variant={EButtonVariant.INFO}>
							Info
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.OUTLINED}>
							Info
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.TEXT}>
							Info
						</Button>
					</div>
					<div className={classes["rows"]}>
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.DEFAULT} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.NEUTRAL} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.PRIMARY} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.ERROR} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.SUCCESS} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.WARNING} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
					</div>
				</div>
			</div>
		</DefaultTemplate>
	);
}
