import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from "react";
import ReactDOM from "react-dom";
import { FocusOn } from "react-focus-on";
import { cn } from "@utils";
import { Button } from "../button";
import { modalContainerVariants, modalVariants } from "./modalVariants";
/**
 * Modal component for displaying content in an overlay with optional header and close button.
 *
 * @example
 * ```tsx
 * <Modal showModal={modalVisible} onHide={() => setModalVisible(false)}>
 *   <Modal.Header>Modal Title</Modal.Header>
 *   <Modal.Body>Modal content goes here</Modal.Body>
 * </Modal>
 * ```
 */
export const Modal = React.forwardRef(({ showModal, onHide, closeButton = true, escKeyClose = true, rtl = false, portalTarget = typeof document !== "undefined" ? document.body : undefined, shards, className, children }, ref) => {
    const modalRef = React.useRef(null);
    let headerPresent = false;
    React.Children.forEach(children, (child) => {
        if (React.isValidElement(child) && child.type === ModalHeader) {
            headerPresent = true;
        }
    });
    const closeModal = React.useCallback(() => {
        if (onHide) {
            onHide();
        }
    }, [onHide]);
    React.useEffect(() => {
        const handleEsc = (e) => {
            if (e.code === "Escape" && escKeyClose) {
                closeModal();
            }
        };
        if (showModal) {
            document.addEventListener("keydown", handleEsc);
        }
        return () => {
            document.removeEventListener("keydown", handleEsc);
        };
    }, [showModal, escKeyClose, closeModal]);
    if (!showModal || !portalTarget) {
        return null;
    }
    return ReactDOM.createPortal(_jsx(FocusOn, Object.assign({ enabled: showModal, shards: shards }, (rtl ? { dir: "rtl" } : {}), { className: cn(modalContainerVariants()), children: _jsxs("div", { ref: (instance) => {
                modalRef.current = instance;
                if (typeof ref === "function") {
                    ref(instance);
                }
                else if (ref) {
                    ref.current = instance;
                }
            }, "data-testid": "modal", className: cn(modalVariants({ headerless: !headerPresent }), className), "aria-labelledby": "dialog-label", "aria-describedby": "dialog-desc", children: [closeButton && (_jsx(Button, { prefixIcon: "cross", onClick: closeModal, "data-testid": "close-button", variant: "text", color: "secondary", "aria-label": "close modal", className: "absolute top-6 end-6 text-gray-800 dark:text-gray-800 dark:hover:text-gray-800", autoFocus: true })), children] }) })), portalTarget);
});
Modal.displayName = "Modal";
/**
 * Modal header component for rendering the title in the Modal.
 *
 * @example
 * ```tsx
 * <Modal.Header>Modal Title</Modal.Header>
 * ```
 */
export const ModalHeader = React.forwardRef(({ children, className }, ref) => {
    if (!children) {
        return null;
    }
    return (_jsx("div", { ref: ref, id: "dialog-label", "data-testid": "modal-header", className: cn("flex flex-row flex-nowrap justify-between text-lg font-semibold me-7 text-secondary-500 dark:text-secondary-50", className), children: children }));
});
ModalHeader.displayName = "ModalHeader";
/**
 * Modal body component for rendering content inside the Modal.
 *
 * @example
 * ```tsx
 * <Modal.Body>Modal content goes here</Modal.Body>
 * ```
 */
export const ModalBody = React.forwardRef(({ children, className }, ref) => {
    if (!children) {
        return null;
    }
    return (_jsx("div", { ref: ref, id: "dialog-desc", "data-testid": "modal-content", className: cn("text-base overflow-y-auto overflow-x-hidden text-wrap mt-2 max-h-[84vh] dark:text-secondary-200", className), children: children }));
});
ModalBody.displayName = "ModalBody";
//# sourceMappingURL=modal.js.map