/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-5e810c3
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useDOMRef } from '@react-spectrum/utils';
import { forwardRef } from 'react';
import { useModal, useOverlay, usePreventScroll } from 'react-aria';
import { tasty } from '../../../tasty/index.js';
import { mergeProps } from '../../../utils/react/index.js';
import { Overlay } from './Overlay.js';
import { Underlay } from './Underlay.js';
export const OVERLAY_WRAPPER_STYLES = {
    position: 'fixed',
    display: 'grid',
    left: 0,
    top: 0,
    placeItems: {
        '': 'center',
        'type=fullscreen': 'center',
        'type=fullscreenTakeover | type=panel': 'stretch',
    },
    boxSizing: 'border-box',
    width: '100vw',
    height: '100dvh',
    pointerEvents: 'none',
    zIndex: 10,
    transition: {
        '': 'visibility .5s steps(2, start)',
        open: 'visibility 0s linear',
    },
};
const ModalWrapperElement = tasty({
    qa: 'ModalWrapper',
    styles: OVERLAY_WRAPPER_STYLES,
});
const ModalElement = tasty({
    styles: {
        display: {
            '': 'none',
            'entering | entered': 'grid',
            exiting: 'grid',
            exited: 'none',
        },
        zIndex: 10,
        height: {
            '': 'max 90dvh',
            'type=fullscreenTakeover | type=panel': '100dvh 100dvh',
            'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',
            'type=panel': 'auto',
        },
        width: {
            '': '$min-dialog-size (100dvw - 8x)',
            'type=panel': 'auto',
        },
        pointerEvents: 'none',
        transition: 'opacity .25s linear, transform .25s ease-in-out',
        transform: {
            '': 'initial',
            'type=modal & !open': 'translate(0, -3x) scale(1, 1)',
            '(type^=fullscreen | type=panel) & !open': 'translate(0, 0) scale(1.02, 1.02)',
        },
        opacity: {
            '': 0,
            open: 0.9999,
        },
    },
});
function Modal(props, ref) {
    let { qa, children, onClose, type, styles, ...otherProps } = props;
    let domRef = useDOMRef(ref);
    let { overlayProps, underlayProps } = useOverlay({ ...props }, domRef);
    return (_jsxs(Overlay, { ...otherProps, children: [type !== 'fullscreenTakeover' && type !== 'panel' && (_jsx(Underlay, { ...underlayProps })), _jsx(ModalWrapper, { ref: domRef, qa: qa, type: type, overlayProps: overlayProps, styles: styles, onClose: onClose, children: children })] }));
}
let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
    let { qa, children, isOpen, type, placement, styles, overlayProps, transitionState, ...otherProps } = props;
    usePreventScroll({ isDisabled: transitionState !== 'entered' });
    let { modalProps } = useModal({ isDisabled: transitionState !== 'entered' });
    return (_jsx(ModalWrapperElement, { "data-type": type, "data-placement": placement, children: _jsx(ModalElement, { qa: qa || 'Modal', styles: styles, mods: {
                open: isOpen,
                entering: transitionState === 'entering',
                exiting: transitionState === 'exiting',
                exited: transitionState === 'exited',
                entered: transitionState === 'entered',
            }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }) }));
});
let _Modal = forwardRef(Modal);
_Modal.displayName = 'Modal';
export { _Modal as Modal };

        