import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect } from "react";
import "./style.scss";
import clsx from "clsx";
import PrimaryButton from "../PrimaryButton";
import TertiaryButton from "../TertiaryButton";
import { modalFooterButtons } from "../../utils";
import IconButton from "../IconButton";
const Modal = ({ id = "", showBackButton, headerHeading, buttonVariant = "noButton", onBackButtonClick = () => { }, onCrossButtonClick = () => { }, footerButtons = modalFooterButtons, children, isModalOpen = true, size = "xs", }) => {
    const className = clsx({
        "modal--Generic": true,
        [`${size}Size--Modal`]: true,
    });
    const dialog = document.getElementById(id);
    const handleOpenClose = () => {
        // console.log("isOpen ::::: ", isModalOpen, dialog);
        if (isModalOpen) {
            dialog?.showModal();
        }
        else {
            dialog?.close();
        }
    };
    useEffect(() => {
        if (dialog) {
            // console.log(
            //   "Ran this time when isModalOpen was ::::: ",
            //   isModalOpen,
            //   dialog
            // );
            handleOpenClose();
        }
    }, [isModalOpen]);
    useEffect(() => {
        if (dialog) {
            // console.log("Ran this from iside of dialog ::::: ", isModalOpen, dialog);
            handleOpenClose();
        }
    }, [dialog]);
    return (_jsx("dialog", { id: id, className: "modal-DialogWrapper", children: _jsxs("div", { className: className, children: [_jsxs("span", { className: "modal-Header", children: [_jsxs("span", { children: [showBackButton && (_jsx(IconButton, { color: "gray", iconType: "arrowLeft", sizeVariant: "xs", iconSize: "20", onClick: onBackButtonClick, variant: "tertiary" })), _jsx("h2", { children: headerHeading })] }), _jsx(IconButton, { color: "gray", iconType: "cross", sizeVariant: "xs", iconSize: "20", onClick: onCrossButtonClick, variant: "tertiary" })] }), _jsx("div", { className: "modal-Body", children: children }), buttonVariant === "oneButton" ? (_jsx("span", { className: "modal-Footer", children: _jsx(PrimaryButton, { colorVariant: "orange", onClick: footerButtons[0].onClick, text: footerButtons[0].text, sizeVariant: "base" }) })) : buttonVariant === "twoButton" ? (_jsxs("span", { className: "modal-Footer", children: [_jsx(PrimaryButton, { colorVariant: "orange", onClick: footerButtons[0].onClick, text: footerButtons[0].text, sizeVariant: "base" }), _jsx(TertiaryButton, { onClick: footerButtons[1].onClick, text: footerButtons[1].text, sizeVariant: "base" })] })) : (_jsx(_Fragment, {}))] }) }));
};
export default Modal;
