import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useEffect, useLayoutEffect, useRef } from 'react';
import { useConsolidatedRef, useContentTabIndex, useEscape, 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 { focusNonInteractiveElement, getActiveElement } 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 headingRef = useRef(null);
    const headingText = typeof headingProp === 'string' ? headingProp : headingProp?.primary;
    const dialogRef = useConsolidatedRef(ref);
    const dialogContentRef = useRef(null);
    const contentTabIndex = useContentTabIndex(dialogRef, dialogContentRef, [], [progressProp]);
    const setFocus = () => {
        if (progressProp)
            return;
        if (headingRef.current) {
            focusNonInteractiveElement(headingRef.current, headingText);
        }
        else if (dialogRef.current) {
            focusNonInteractiveElement(dialogRef.current, headingText);
        }
    };
    useEscape(e => {
        onDismiss?.();
        e.stopPropagation();
    }, dialogRef, [onDismiss]);
    useOuterEvent('mousedown', [target, dialogRef], () => {
        onDismiss?.();
    });
    // Using layout effect to capture the focused element prior to dialog elements taking focus.
    useLayoutEffect(() => {
        const initiatorElement = getActiveElement();
        return () => {
            if (initiatorElement instanceof HTMLElement && initiatorElement.isConnected) {
                initiatorElement.focus();
            }
        };
    }, []);
    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 () => {
            target.removeEventListener('click', closeDialog);
        };
    }, []);
    const heading = headingProp ? (_jsx(Text, { ref: headingRef, id: headingId, variant: 'h2', children: headingText })) : 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'), children: _jsx(Icon, { name: 'times' }) }));
    return (_jsxs(StyledInfoDialog, { ...restProps, ...(typeof headingProp === 'string'
            ? { 'aria-labelledby': headingId }
            : { 'aria-label': headingProp?.primary }), arrow: true, target: target, progress: progressProp, ref: dialogRef, children: [headingProp && heading && (_jsxs(Flex, { container: { alignItems: 'center', justify: 'between', pad: [1, 2], gap: 1 }, item: { shrink: 0 }, as: StyledDialogHeader, children: [typeof headingProp === 'string' ? (heading) : (_jsx(SummaryItem, { ref: headingRef, 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, tabIndex: contentTabIndex, children: [!headingProp && dismissButton, children && (_jsx(StyledChildrenWrap, { inert: progressProp ? '' : undefined, children: children })), progress] }))] }));
});
export default InfoDialog;
//# sourceMappingURL=InfoDialog.js.map