import { XMarkIcon } from "@heroicons/react/24/outline";
import classNames from "classnames";
import React from "react";

import Button, { EButtonstyletype, EButtonVariant, IButtonProps } from "../Button";
import IconButton, { EIconButtonVariant } from "../IconButton";
import Typography, { ETypo } from "../Typography";
import classes from "./classes.module.scss";

type IProps = {
	className?: string;
	isOpen: boolean;
	onClose?: () => void;
	children?: React.ReactNode;
	title?: string;
	firstButton?: IButtonProps;
	secondButton?: IButtonProps;
	fullwidth?: boolean;
	fullscreen?: boolean;
	fullheight?: boolean;
};

export default function Modal(props: IProps) {
	const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen, fullheight } = props;

	if (!isOpen) return null;
	return (
		<div className={classes["root"]}>
			<div className={classes["backdrop"]} onClick={onClose} />

			<div
				className={classNames(
					classes["content"],
					className,
					fullwidth && classes["fullwidth"],
					fullscreen && classes["fullscreen"],
					fullheight && classes["fullheight"],
				)}>
				<div className={classes["header"]}>
					{title && <Typography typo={ETypo.TITLE_H4}> {title}</Typography>}
					<IconButton variant={EIconButtonVariant.NEUTRAL} onClick={onClose} icon={<XMarkIcon />} />
				</div>

				<div className={classNames(classes["children"], className)}>{children}</div>

				<div className={classes["footer"]}>
					{firstButton && (
						<Button
							{...firstButton}
							variant={firstButton.variant ?? EButtonVariant.PRIMARY}
							styletype={firstButton.styletype ?? EButtonstyletype.OUTLINED}
							fullwidth={firstButton.fullwidth ?? true}>
							{firstButton.children}
						</Button>
					)}
					{secondButton && (
						<Button
							{...secondButton}
							variant={secondButton.variant ?? EButtonVariant.PRIMARY}
							styletype={secondButton.styletype ?? EButtonstyletype.CONTAINED}
							fullwidth={secondButton.fullwidth ?? true}>
							{secondButton.children}
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}