import { jsx, jsxs } from 'react/jsx-runtime';
import { Children, isValidElement, useCallback, cloneElement } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { Overlay } from '../../effects/Overlay/Overlay.js';
import { modalOverlayAnimations } from '../Modal/Modal.animations.js';
import { backModalAnimations, frontModalAnimations } from './ModalStack.animations.js';
import { ModalStackModal } from './ModalStackModal.js';

const MODAL_STACK_CONTENT_ANIMATION = {
    initial: { opacity: 1 },
    animate: { opacity: 1 },
    exit: { opacity: 1 },
};
const ModalStackRoot = ({ isOpen, onClose, closeOnOverlayClick = true, closeOnEsc = true, children, className, }) => {
    var _a, _b;
    // Extract all valid modal children
    const modalChildren = [];
    Children.forEach(children, (child) => {
        // Check if the child is a valid element and specifically our ModalStackModal
        if (isValidElement(child) && child.type === ModalStackModal) {
            modalChildren.push(child);
        }
    });
    // Calculate generic stack depth:
    // - Topmost (Front) is the last child
    // - Second (Back) is the second-to-last child
    const lastIndex = modalChildren.length - 1;
    const frontModal = lastIndex >= 0 ? modalChildren[lastIndex] : null;
    const backModal = lastIndex >= 1 ? modalChildren[lastIndex - 1] : null;
    const isFrontOpen = (_a = frontModal === null || frontModal === void 0 ? void 0 : frontModal.props.isOpen) !== null && _a !== void 0 ? _a : false;
    const frontOnClose = frontModal === null || frontModal === void 0 ? void 0 : frontModal.props.onClose;
    const backModalSize = (_b = backModal === null || backModal === void 0 ? void 0 : backModal.props.size) !== null && _b !== void 0 ? _b : "md";
    // Escape/overlay click closes the topmost visible modal
    const handleClose = useCallback(() => {
        if (isFrontOpen && frontOnClose) {
            frontOnClose();
        }
        else {
            onClose();
        }
    }, [isFrontOpen, frontOnClose, onClose]);
    return (jsx(Overlay, { isOpen: isOpen, onClose: handleClose, closeOnOverlayClick: closeOnOverlayClick, closeOnEsc: closeOnEsc, position: "center", role: "dialog", ariaModal: true, animations: {
            overlay: modalOverlayAnimations,
            content: MODAL_STACK_CONTENT_ANIMATION,
        }, contentClassName: className, children: jsxs("div", { className: "relative flex items-center justify-center w-full", children: [backModal && (jsx(motion.div, { className: "w-full flex items-center justify-center", variants: backModalAnimations, initial: "initial", animate: isFrontOpen ? "stacked" : "idle", exit: "exit", style: { originY: 0 }, children: cloneElement(backModal, {
                        _stackOnClose: onClose,
                        _isBackModal: true,
                        showCloseButton: lastIndex - 1 === 0 ? backModal.props.showCloseButton : false,
                    }) }, backModal.key || "back-modal")), jsx(AnimatePresence, { mode: "wait", children: isFrontOpen && frontModal && (jsx(motion.div, { className: "absolute inset-0 flex items-start justify-center w-full pt-3", variants: frontModalAnimations, initial: "initial", animate: "animate", exit: "exit", children: cloneElement(frontModal, {
                            _stackOnClose: frontOnClose || onClose,
                            _isBackModal: false,
                            size: frontModal.props.size || backModalSize,
                            showCloseButton: false,
                        }) }, frontModal.key || "front-modal")) })] }) }));
};
ModalStackRoot.displayName = "ModalStack";
const ModalStack = Object.assign(ModalStackRoot, {
    Modal: ModalStackModal,
});

export { ModalStack };
