import classNames from "classnames";
import classes from "./classes.module.scss";
import Button, { EButtonStyleType, EButtonVariant } from "../Button";
import React from "react";
import Typography, { ETypo } from "../Typography";

import { XMarkIcon } from "@heroicons/react/24/outline";
import IconButton, { EIconButtonVariant } from "../IconButton";

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

export default function Modal(props: IProps) {
	const { isOpen, onClose, children, className, title, firstButton, secondButton, fullwidth, fullscreen } = 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"],
				)}>
				<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
							variant={EButtonVariant.PRIMARY}
							styleType={EButtonStyleType.OUTLINED}
							leftIcon={firstButton.leftIcon}
							rightIcon={firstButton.rightIcon}
							onClick={firstButton.onClick}>
							{firstButton.text}
						</Button>
					)}
					{secondButton && (
						<Button
							variant={EButtonVariant.PRIMARY}
							styleType={EButtonStyleType.CONTAINED}
							leftIcon={secondButton.leftIcon}
							rightIcon={secondButton.rightIcon}
							onClick={secondButton.onClick}>
							{secondButton.text}
						</Button>
					)}
				</div>
			</div>
		</div>
	);
}