import { jsx } from 'react/jsx-runtime';
import { createContext, useId, useState, useEffect, useContext } from 'react';
import { cn } from '../../../utils/cn.js';
import { Overlay } from '../../effects/Overlay/Overlay.js';
import { modalTheme, modalSizeVariants } from './Modal.theme.js';
import { modalContentAnimations, modalOverlayAnimations } from './Modal.animations.js';
import { ModalHeader } from './ModalHeader.js';
import { ModalTitle } from './ModalTitle.js';
import { ModalSubtitle } from './ModalSubtitle.js';
import { ModalBody } from './ModalBody.js';
import { ModalFooter } from './ModalFooter.js';

// Create context for Modal components
const ModalContext = createContext(undefined);
const useModalContext = () => {
    const ctx = useContext(ModalContext);
    if (!ctx)
        throw new Error("Modal compound components must be used within <Modal>");
    return ctx;
};
const ModalRoot = ({ isOpen, onClose, size = "md", variant = "default", closeOnOverlayClick = true, closeOnEsc = true, showCloseButton = true, role = "dialog", children, className, theme: themeOverrides, ...props }) => {
    var _a;
    // Generate unique IDs for ARIA linkage
    const id = useId();
    const titleId = `${id}-title`;
    const subtitleId = `${id}-subtitle`;
    // State for tracking if modal body is scrollable
    const [isBodyScrollable, setIsBodyScrollable] = useState(false);
    // Reset scroll state when modal closes
    useEffect(() => {
        if (!isOpen) {
            setIsBodyScrollable(false);
        }
    }, [isOpen]);
    // Detect whether size is a preset token or an arbitrary Tailwind class
    const SIZE_TOKENS = ["sm", "md", "lg", "xl", "full"];
    const isSizeToken = SIZE_TOKENS.includes(size);
    // Merge theme with overrides
    const theme = {
        ...modalTheme,
        ...(themeOverrides || {}),
        containerVariants: {
            ...modalTheme.containerVariants,
            ...((themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerVariants) || {}),
        },
    };
    // Context value
    const contextValue = {
        isOpen,
        onClose,
        size,
        isSizeToken,
        closeOnOverlayClick,
        closeOnEsc,
        showCloseButton,
        theme,
        isBodyScrollable,
        setIsBodyScrollable,
        titleId,
        subtitleId,
    };
    return (jsx(Overlay, { isOpen: isOpen, onClose: onClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: role, ariaModal: true, ariaLabelledBy: titleId, ariaDescribedBy: subtitleId, contentClassName: cn(theme.container, (_a = theme.containerVariants) === null || _a === void 0 ? void 0 : _a[variant], isSizeToken ? modalSizeVariants[size] : size, className), animations: {
            overlay: modalOverlayAnimations,
            content: modalContentAnimations,
        }, ...props, children: jsx(ModalContext.Provider, { value: contextValue, children: children }) }));
};
ModalRoot.displayName = "Modal";
// Attach compound subcomponents
const Modal = Object.assign(ModalRoot, {
    Header: ModalHeader,
    Title: ModalTitle,
    Subtitle: ModalSubtitle,
    Body: ModalBody,
    Footer: ModalFooter,
});

export { Modal, ModalContext, useModalContext };
