import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { remToPx, stripUnit } from 'polished';
import { useEffect, useRef, useState } from 'react';
import { useArrows, useElement, useI18n, useTheme } from '../../hooks';
import { tryCatch } from '../../utils';
import Flex from '../Flex';
import Text from '../Text';
import Tooltip from '../Tooltip';
import { CurrentStepPopover, StepMarker, StyledBar, StyledFill, StyledFormProgress, StyledStepMarkers } from './FormProgress.styles';
const HorizontalFormProgress = ({ steps, currentStepId, ...restProps }) => {
    const t = useI18n();
    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();
    let popoverPlacement = 'top';
    if (curIdx === 0)
        popoverPlacement = 'top-start';
    else if (curIdx === steps.length - 1)
        popoverPlacement = 'top-end';
    useArrows(stepsRef, {
        selector: 'button',
        cycle: false,
        dir: 'left-right',
        initialFocusElement: currentStepEl
    });
    useArrows(stepsRef, {
        selector: 'button',
        cycle: false,
        dir: 'up-down',
        initialFocusElement: currentStepEl
    });
    useEffect(() => {
        if (stepEls[curStep.id] && stepEls[curStep.id] !== currentStepEl) {
            setCurrentStepEl(stepEls[curStep.id]);
        }
    }, [Object.keys(stepEls), curStep]);
    return (_jsxs(StyledFormProgress, { ...restProps, container: { alignItems: 'center' }, children: [_jsx(CurrentStepPopover, { show: true, 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 }) }), _jsx(Flex, { ref: stepsRef, as: StyledStepMarkers, container: { justify: 'between', alignItems: 'center' }, item: { grow: 1 }, children: steps.map((step, index) => {
                    return (_jsx("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, "aria-label": `${step.name} - ${t('step_num', [index + 1, steps.length])}`, "aria-current": index === curIdx ? 'step' : undefined, tabIndex: index === curIdx ? 0 : -1, current: index === curIdx, depth: step.depth, prior: index < curIdx, onClick: step.onMarkerClick, children: index !== curIdx && (_jsx(Tooltip, { target: stepEls[step.id], showDelay: 'none', hideDelay: 'short', describeTarget: false, children: step.name })) }) }, step.id));
                }) }), _jsx(StyledBar, { children: _jsx(StyledFill, { style: { '--fillScale': fillScale } }) })] }));
};
export default HorizontalFormProgress;
//# sourceMappingURL=HorizontalFormProgress.js.map