import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import React from "react";
import { InformationCircleIcon, XMarkIcon } from "@heroicons/react/24/outline";

import classes from "./classes.module.scss";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
import classNames from "classnames";
import IconButton from "../IconButton";
import useOpenable from "@Front/Hooks/useOpenable";
import BadgeIcon, { EBadgeColor } from "../BadgeIcon";

type IProps = {
	variant: EAlertVariant;
	title: string;
	description: string;
	icon?: React.ReactNode;
	firstButton?: IButtonProps;
	secondButton?: IButtonProps;
	closeButton?: boolean;
	fullWidth?: boolean;
};

export enum EAlertVariant {
	INFO = "info",
	SUCCESS = "success",
	WARNING = "warning",
	ERROR = "error",
	NEUTRAL = "neutral",
}

const variantButtonMap: Record<EAlertVariant, EButtonVariant> = {
	[EAlertVariant.INFO]: EButtonVariant.PRIMARY,
	[EAlertVariant.SUCCESS]: EButtonVariant.SUCCESS,
	[EAlertVariant.WARNING]: EButtonVariant.WARNING,
	[EAlertVariant.ERROR]: EButtonVariant.ERROR,
	[EAlertVariant.NEUTRAL]: EButtonVariant.NEUTRAL,
};

const variantColorMap: Record<EAlertVariant, EBadgeColor> = {
	[EAlertVariant.INFO]: EBadgeColor.INFO,
	[EAlertVariant.SUCCESS]: EBadgeColor.SUCCESS,
	[EAlertVariant.WARNING]: EBadgeColor.WARNING,
	[EAlertVariant.ERROR]: EBadgeColor.ERROR,
	[EAlertVariant.NEUTRAL]: EBadgeColor.NEUTRAL,
};

export default function Alert(props: IProps) {
	const { isOpen, close } = useOpenable({ defaultOpen: true });
	const { variant = EAlertVariant.INFO, title, description, firstButton, secondButton, closeButton, icon, fullWidth } = props;

	if (!isOpen) return null;

	return (
		<div className={classNames(classes["root"], classes[variant], fullWidth && classes["fullwidth"])}>
			<BadgeIcon icon={icon ?? <InformationCircleIcon />} color={variantColorMap[variant]} />
			<div className={classes["content"]}>
				<div className={classes["text-container"]}>
					<Typography typo={ETypo.TEXT_LG_SEMIBOLD} color={ETypoColor.COLOR_NEUTRAL_950}>
						{title}
					</Typography>
					<Typography typo={ETypo.TEXT_MD_LIGHT} color={ETypoColor.COLOR_NEUTRAL_700}>
						{description}
					</Typography>
				</div>

				<div className={classes["button-container"]}>
					{firstButton && (
						<Button
							{...firstButton}
							size={firstButton.size ?? EButtonSize.MD}
							variant={firstButton.variant ?? variantButtonMap[variant]}
							styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}>
							{firstButton.children}
						</Button>
					)}
					{secondButton && (
						<Button
							{...secondButton}
							size={secondButton.size ?? EButtonSize.MD}
							variant={secondButton.variant ?? variantButtonMap[variant]}
							styletype={secondButton.styletype ?? EButtonstyletype.OUTLINED}>
							{secondButton.children}
						</Button>
					)}
				</div>
			</div>
			{closeButton && <IconButton onClick={close} icon={<XMarkIcon />} />}
		</div>
	);
}