import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { remToPx, stripUnit } from 'polished';
import { useEffect, useRef, useState } from 'react';
import { useArrows, useDirection, useElement, useI18n, useTheme } from '../../hooks';
import { tryCatch } from '../../utils';
import Flex from '../Flex';
import Text from '../Text';
import Tooltip from '../Tooltip';
import Button from '../Button';
import InfoDialog from '../Dialog/InfoDialog';
import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledHorizontalStepText, StyleHorizontalStepMarkers } from './FormProgress.styles';
import VerticalFormProgress from './VerticalFormProgress';
import { useFormProgressOverflow } from './useFormProgressOverflow';
const HorizontalFormProgress = ({ steps, currentStepId, showStepNames = false, ...restProps }) => {
    const t = useI18n();
    const [stepsDialogButtonEl, setStepsDialogButtonEl] = useElement();
    const [showStepsDialog, setShowStepsDialog] = useState(false);
    const { ref: formProgressRef, state: stepsAreOverflowing } = useFormProgressOverflow(steps.length, showStepNames);
    const curIdx = steps.findIndex(step => step.id === currentStepId);
    const curStep = steps[curIdx];
    const fillScale = curIdx / (steps.length - 1);
    const [currentStepEl, setCurrentStepEl] = useElement();
    const [stepEls, setStepEls] = useState({});
    const stepsRef = useRef(null);
    const theme = useTheme();
    const { rtl } = useDirection();
    let popoverPlacement = 'bottom';
    if (curIdx === 0)
        popoverPlacement = rtl ? 'bottom-end' : 'bottom-start';
    else if (curIdx === steps.length - 1)
        popoverPlacement = rtl ? 'bottom-start' : 'bottom-end';
    useArrows(stepsRef, {
        selector: '[data-step-marker]',
        dir: 'left-right',
        initialFocusElement: currentStepEl
    });
    useArrows(stepsRef, {
        selector: '[data-step-marker]',
        cycle: false,
        dir: 'up-down',
        initialFocusElement: currentStepEl
    });
    useEffect(() => {
        if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {
            setCurrentStepEl(stepEls[curStep.id]);
        }
    }, [Object.keys(stepEls), curStep]);
    useEffect(() => {
        if (!stepsAreOverflowing) {
            setShowStepsDialog(false);
        }
    }, [stepsAreOverflowing]);
    const numberOfSteps = steps.length;
    return (_jsxs(StyledFormProgress, { ref: formProgressRef, ...restProps, container: { alignItems: 'center' }, showStepNames: showStepNames, children: [_jsx(CurrentStepPopover, { show: !showStepNames, target: currentStepEl, placement: popoverPlacement, strategy: 'absolute', portal: false, hideOnTargetHidden: true, modifiers: [
                    {
                        name: 'offset',
                        options: {
                            offset: [
                                0,
                                tryCatch(() => stripUnit(remToPx(theme.base.spacing)), () => 8)
                            ]
                        }
                    },
                    {
                        name: 'placeAndContain',
                        enabled: false
                    },
                    {
                        name: 'flip',
                        enabled: false
                    },
                    {
                        name: 'preventOverflow',
                        options: {
                            padding: 0
                        }
                    }
                ], children: _jsx(Text, { variant: 'h4', children: curStep.name }) }), stepsAreOverflowing ? (_jsxs("div", { children: [_jsx(Button, { ref: setStepsDialogButtonEl, variant: 'link', onClick: () => {
                            setShowStepsDialog(true);
                        }, children: t('step_num', [curIdx + 1, numberOfSteps]) }), _jsx(Text, { variant: 'h4', children: curStep.name }), stepsDialogButtonEl && showStepsDialog && (_jsx(InfoDialog, { heading: t('steps'), target: stepsDialogButtonEl, onDismiss: () => {
                            setShowStepsDialog(false);
                        }, placement: 'bottom-start', children: _jsx(VerticalFormProgress, { steps: steps, currentStepId: currentStepId }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { ref: stepsRef, as: StyleHorizontalStepMarkers, container: { justify: 'between', alignItems: 'start' }, item: { grow: 1 }, showStepNames: showStepNames, children: steps.map((step, index) => {
                            const isCurrent = index === curIdx;
                            return (_jsxs("li", { children: [_jsx(StepMarker, { ref: (el) => {
                                            setStepEls(curr => {
                                                const newEls = { ...curr };
                                                if (!el && newEls[step.id]) {
                                                    delete newEls[step.id];
                                                    return newEls;
                                                }
                                                if (el)
                                                    return { ...newEls, [step.id]: el };
                                                return newEls;
                                            });
                                        }, id: step.id, "data-step-marker": '', "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": isCurrent ? 'step' : undefined, tabIndex: isCurrent ? 0 : -1, current: isCurrent, depth: step.depth, completed: step.completed, onClick: step.onMarkerClick, clickable: !!step.onMarkerClick && !isCurrent, children: !showStepNames && !isCurrent && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) }), showStepNames &&
                                        (!!step.onMarkerClick && !isCurrent ? (_jsx(Button, { variant: 'link', onClick: step.onMarkerClick, as: StyledHorizontalStepText, tabIndex: -1, children: step.name })) : (_jsx(Text, { variant: isCurrent ? 'h3' : undefined, as: StyledHorizontalStepText, children: step.name })))] }, step.id));
                        }) }), _jsx(StyledBar, { shifted: showStepNames, children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }))] }));
};
export default HorizontalFormProgress;
//# sourceMappingURL=HorizontalFormProgress.js.map