import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useRef, useEffect } from 'react';
import { useConsolidatedRef, useEscape, useFocusTrap, useI18n, useOuterEvent, useUID } from '../../hooks';
import Text from '../Text';
import Icon from '../Icon';
import Progress from '../Progress';
import Flex from '../Flex';
import SummaryItem from '../SummaryItem';
import { getFocusables } from '../../utils';
import { StyledChildrenWrap, StyledDialogContent, StyledDialogHeader } from './Dialog.styles';
import { StyledDismissButton, StyledInfoDialog } from './InfoDialog.styles';
const InfoDialog = forwardRef(function InfoDialog({ target, heading: headingProp, children, progress: progressProp, onDismiss, ...restProps }, ref) {
    const t = useI18n();
    const headingId = useUID();
    const dialogRef = useConsolidatedRef(ref);
    const dialogContentRef = useRef(null);
    const closeButtonRef = useRef(null);
    const setFocus = () => {
        if (progressProp)
            return;
        const focusables = getFocusables(dialogRef);
        const focusable = focusables.find(el => {
            return dialogContentRef.current?.contains(el);
        }) ??
            closeButtonRef.current ??
            focusables[0];
        focusable?.focus();
    };
    useEscape(e => {
        onDismiss?.();
        e.stopPropagation();
    }, dialogRef, [onDismiss]);
    useOuterEvent('mousedown', [target, dialogRef], () => {
        onDismiss?.();
    });
    useFocusTrap(dialogRef, false);
    useEffect(() => {
        if (!progressProp) {
            setFocus();
        }
    }, [progressProp]);
    useEffect(() => {
        const closeDialog = () => {
            setTimeout(() => {
                onDismiss?.();
                // The 0 timeout ensures that the dialog will not re-open immediately after the close event is triggered.
            }, 0);
        };
        target.addEventListener('click', closeDialog);
        return () => {
            if (document.contains(target)) {
                target.focus();
            }
            target.removeEventListener('click', closeDialog);
        };
    }, []);
    const heading = headingProp ? (_jsx(Text, { id: headingId, variant: 'h2', children: typeof headingProp === 'string' ? headingProp : headingProp.primary })) : null;
    const progress = (_jsx(Progress, { visible: !!progressProp, focusOnVisible: true, placement: 'local', message: typeof progressProp === 'string' ? progressProp : undefined }));
    const dismissButton = (_jsx(StyledDismissButton, { icon: true, variant: 'simple', onClick: () => {
            onDismiss();
        }, label: t('close'), ref: closeButtonRef, children: _jsx(Icon, { name: 'times' }) }));
    return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
            ? { labelledbyId: headingId }
            : { ariaLabel: headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: 2, gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { primary: heading, secondary: headingProp.secondary ? (_jsx(Text, { variant: 'secondary', children: headingProp.secondary })) : undefined, visual: headingProp.visual })), dismissButton] })), (!headingProp || children || progressProp) && (_jsxs(Flex, { container: { direction: 'column' }, item: { grow: 1 }, as: StyledDialogContent, ref: dialogContentRef, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
});
export default InfoDialog;
//# sourceMappingURL=InfoDialog.js.map