import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom";
import Styles from "./AdaptiveDialog.module.scss";
import MutableHamburgerButton from "../MutableHamburgerButton";
import ScrollAndFocusLock from "../utilitary/ScrollAndFocusLock";
import { useOneUIConfig } from "../../context/OneUIProvider";
/**
 * This is a dialog component that shows content in an overlay.
 * On mobile devices, it slides in from the side like a drawer menu,
 * while on desktop computers, it appears as a centered popup window.
 * It handles closing animations and can render in different locations on the page.
 **/
export default function AdaptiveDialog({ variant = "default", onClose, open = false, className = "", onClickOut, children, onClosed, inline = false, }) {
    const rootDivRef = useRef(null);
    const [isVisible, setIsVisible] = useState(open);
    const [expanded, setExpanded] = useState(false);
    const variantClass = useOneUIConfig(`component.adaptiveDialog.variant.${variant}`, "");
    useEffect(() => {
        if (open) {
            setIsVisible(true);
            const toggleVisbility = (e) => {
                if (e.animationName === Styles.backdropDismiss) {
                    onClosed?.();
                    setIsVisible(false);
                    e.target.removeEventListener("animationend", toggleVisbility);
                }
            };
            rootDivRef.current.addEventListener("animationend", toggleVisbility);
        }
    }, [open]);
    const globalClassName = {
        backdrop: useOneUIConfig("component.adaptiveDialog.backdropClassName", ""),
        dialog: useOneUIConfig("component.adaptiveDialog.dialogClassName", ""),
    };
    const content = (_jsx("div", { ref: rootDivRef, className: `${Styles.backdrop} ${open ? Styles.open : Styles.close} ${expanded ? Styles.expanded : ""} ${globalClassName.backdrop} ${variantClass}`, onClick: onClickOut, onAnimationEnd: ({ target, currentTarget }) => {
            if (target === currentTarget)
                target.style.pointerEvents = "initial";
        }, children: _jsx("div", { className: `${Styles.container} ${className} ${globalClassName.dialog}`, onClick: (e) => e.stopPropagation(), children: _jsxs(ScrollAndFocusLock, { open: open, children: [onClose && (_jsx("button", { className: Styles.closeBtn, onClick: onClose, children: _jsx(MutableHamburgerButton, { state: "closed", size: 24 }) })), _jsx("div", { onClick: () => setExpanded((p) => !p) }), children] }) }) }));
    return isVisible || open ? (inline ? (content) : (_jsx(_Fragment, { children: ReactDOM.createPortal(content, document.body) }))) : null;
}
//# sourceMappingURL=AdaptiveDialog.js.map