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

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { createFocusManager } from '@react-aria/focus';
import { useDOMRef } from '@react-spectrum/utils';
import { forwardRef, useEffect, useMemo, useRef } from 'react';
import { DismissButton, FocusScope, useDialog, useMessageFormatter, } from 'react-aria';
import { CloseIcon } from '../../../icons/index.js';
import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, extractStyles, FLOW_STYLES, tasty, } from '../../../tasty/index.js';
import { mergeProps, SlotProvider } from '../../../utils/react/index.js';
import { ItemButton } from '../../actions/index.js';
import { useOpenTransitionContext } from '../Modal/OpenTransition.js';
import { useDialogContext } from './context.js';
const STYLES_LIST = [
    ...BASE_STYLES,
    ...DIMENSION_STYLES,
    ...BLOCK_STYLES,
    ...FLOW_STYLES,
];
const DialogElement = tasty({
    as: 'section',
    styles: {
        display: 'flex',
        flow: 'column',
        fill: '#white',
        pointerEvents: 'auto',
        outline: 0,
        position: {
            '': 'relative',
            'type=panel': 'absolute',
        },
        width: {
            '': '$min-dialog-size $dialog-size (100dvw - 8x)',
            'type=fullscreen': '(100dvw - 8x) (100dvw - 8x)',
            'type=fullscreenTakeover': '100dvw 100dvw',
            'type=panel': 'auto',
        },
        height: {
            '': 'auto (100dvh - 8x)',
            'type=fullscreen': '(100dvh - 8x) (100dvh - 8x)',
            'type=fullscreenTakeover | type=panel': '100dvh 100dvh',
            'type=popover': 'initial initial (50dvh - 5x)',
        },
        gap: 0,
        border: {
            '': false,
            'type=popover': true,
        },
        radius: {
            '': '1cr',
            'type=tray': '1cr top',
            'type=fullscreenTakeover': '0r',
        },
        shadow: {
            '': '$dialog-shadow',
            'type=popover | type=panel': '$card-shadow',
        },
        top: {
            '': false,
            'type=modal': '((50vh - 50%) / -3)',
            'type=panel': 'auto',
        },
        '$dialog-title-padding-v': {
            '': '1.5x',
            'type=popover': '1x',
        },
        '$dialog-content-padding-v': {
            '': '1.5x',
            'type=popover': '1x',
        },
        '$dialog-padding-h': {
            '': '1.5x',
            'type=popover': '1x',
        },
        '$dialog-footer-v': {
            '': '1.5x',
            'type=popover': '1x',
        },
        '$dialog-content-gap': {
            '': '1.5x',
            'type=popover': '1x',
        },
    },
});
const CloseButton = tasty(ItemButton, {
    qa: 'ModalCloseButton',
    type: 'neutral',
    styles: {
        position: 'absolute',
        top: '1x',
        right: '1x',
    },
});
const sizeMap = {
    S: 'small',
    M: 'medium',
    L: 'large',
};
const sizePxMap = {
    small: 360,
    medium: 479,
    large: 798,
};
const intlMessages = {
    'en-US': {
        dismiss: 'Dismiss',
        alert: 'Alert',
    },
};
/**
 * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
 * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
 */
export const Dialog = forwardRef(function Dialog(props, ref) {
    const transitionContext = useOpenTransitionContext();
    const isEntered = transitionContext?.transitionState === 'entered';
    const context = useDialogContext();
    const content = useMemo(() => {
        return _jsx(DialogContent, { ...props, ref: ref }, "content");
    }, [props, ref]);
    const shouldContainFocus = isEntered && context.type !== 'panel';
    // Track the element that was focused before the dialog opened
    // This handles hideOnClose case where FocusScope doesn't unmount
    const previouslyFocusedRef = useRef(null);
    // Capture the focused element when dialog opens
    useEffect(() => {
        if (context.isOpen) {
            previouslyFocusedRef.current = document.activeElement;
        }
    }, [context.isOpen]);
    // Restore focus when dialog closes (for hideOnClose case where component stays mounted)
    useEffect(() => {
        if (!context.isOpen && previouslyFocusedRef.current) {
            const elementToFocus = previouslyFocusedRef.current;
            // Use setTimeout to ensure this runs after the close transition
            setTimeout(() => {
                elementToFocus?.focus?.();
            });
            previouslyFocusedRef.current = null;
        }
    }, [context.isOpen]);
    return (
    // This component traps the focus inside the dialog and restores it on close.
    _jsx(FocusScope, { restoreFocus: true, contain: shouldContainFocus, children: content }));
});
const DialogContent = forwardRef(function DialogContent(props, ref) {
    let { type = 'modal', ...contextProps } = useDialogContext();
    let { qa, children, size = 'M', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, closeButtonStyles, style, ...otherProps } = props;
    size = sizeMap[size.toUpperCase()] || size;
    const styles = extractStyles(otherProps, STYLES_LIST);
    let formatMessage = useMessageFormatter(intlMessages);
    let domRef = useDOMRef(ref);
    let { dialogProps, titleProps } = useDialog(mergeProps(contextProps, props), domRef);
    // If rendered in a popover or tray there won't be a visible dismiss button,
    // so we render a hidden one for screen readers.
    let dismissButton;
    if (type === 'popover' || type === 'tray') {
        dismissButton = _jsx(DismissButton, { onDismiss: onDismiss });
    }
    // Focus the first focusable element in the dialog when it opens
    useEffect(() => {
        if (contextProps.isOpen) {
            setTimeout(() => {
                if (domRef.current &&
                    !domRef.current.contains(document.activeElement)) {
                    // Priority 1: autofocus input or primary button
                    const priorityElement = domRef.current.querySelector('input[data-autofocus], button[type="submit"], button[data-type="primary"]');
                    if (priorityElement) {
                        priorityElement.focus();
                    }
                    else {
                        // Fallback: focus first tabbable element, or dialog itself
                        const focusManager = createFocusManager(domRef);
                        if (!focusManager.focusFirst({ tabbable: true })) {
                            domRef.current.focus();
                        }
                    }
                }
            });
        }
    }, [contextProps.isOpen]);
    // let hasHeader = useHasChild('[data-id="Header"]', domRef);
    // let hasFooter = useHasChild('[data-id="Footer"]', domRef);
    let slots = {
        title: {
            level: 2,
            preset: 'h4',
            ...titleProps,
        },
        content: {
            styles: {
                flexGrow: 1,
                padding: '$dialog-content-padding-v $dialog-padding-h',
                gap: '$dialog-content-gap',
                height: {
                    '': 'max (100% - (2 * $dialog-content-padding-v))',
                    ':last-child': 'max (100% - $dialog-content-padding-v)',
                },
            },
        },
        header: {
            ellipsis: true,
            styles: {
                display: 'flex',
                flow: 'row',
                gap: '1x',
                placeItems: 'center stretch',
                placeContent: 'space-between',
                padding: `$dialog-title-padding-v ${isDismissable ? '($dialog-padding-h + 4x)' : '$dialog-padding-h'} $dialog-title-padding-v $dialog-padding-h`,
                border: 'bottom',
            },
        },
        footer: {
            styles: {
                display: 'flex',
                gap: '1x',
                flow: 'row-reverse',
                placeItems: 'baseline stretch',
                placeContent: 'space-between',
                padding: '$dialog-footer-v $dialog-padding-h',
            },
        },
        buttonGroup: {
            styles: {
                flow: 'row-reverse',
            },
        },
    };
    return (_jsxs(DialogElement, { ref: domRef, "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: { dismissable: isDismissable }, style: {
            '--dialog-size': `${sizePxMap[size] || sizePxMap.small}px`,
            ...style,
        }, "data-type": type, "data-size": size, children: [dismissButton, _jsxs(SlotProvider, { slots: slots, children: [isDismissable && (_jsx(CloseButton, { icon: closeIcon || _jsx(CloseIcon, { size: 20 }), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() })), children] })] }));
});

        