import React, { DetailedHTMLProps, HTMLAttributes } from "react";
import { twMerge } from "tailwind-merge";
import ReactDOM from "react-dom";
import Button from "../layout/Button";
import { X } from "lucide-react";
import { TWUI_MODAL_PROPS } from "../elements/Modal";
import Paper from "../elements/Paper";
import _ from "lodash";

type Props = TWUI_MODAL_PROPS & {
    open: boolean;
    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
};

/**
 * # Modal Main Component
 */
export default function ModalComponent({ open, setOpen, ...props }: Props) {
    if (!open) return null;

    return ReactDOM.createPortal(
        <div
            className={twMerge(
                "fixed z-[200] top-0 left-0 w-screen h-screen",
                "flex flex-col items-center justify-center p-4",
                "twui-modal-root"
            )}
        >
            <div
                className={twMerge(
                    "absolute top-0 left-0 bg-dark/80 z-0",
                    "w-screen h-screen"
                )}
                onClick={(e) => {
                    setOpen(false);
                }}
            ></div>
            <Paper
                {..._.omit(props, ["targetWrapperProps"])}
                className={twMerge(
                    "z-10 max-w-[500px] bg-background-light dark:bg-background-dark",
                    "w-full relative max-h-[95vh] overflow-y-auto",
                    "twui-modal-content",
                    props.className
                )}
            >
                {props.children}
                <Button
                    className="absolute top-0 right-0 p-2"
                    variant="ghost"
                    color="gray"
                    onClick={() => {
                        setOpen(false);
                    }}
                    title="Close Modal Button"
                >
                    <X size={30} />
                </Button>
            </Paper>
        </div>,
        document.getElementById("twui-modal-root") as HTMLElement
    );
}