import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useEffect, useRef, useState } from 'react';
import Grid from '../Grid';
import Text from '../Text';
import { useArrows, useElement, useI18n } from '../../hooks';
import { StepMarker, StyledBulletWrapper, StyledStepText, StyledVerticalStepMarkers } from './FormProgress.styles';
const VerticalFormProgress = ({ steps, currentStepId, ...restProps }) => {
    const t = useI18n();
    const curIdx = steps.findIndex(step => step.id === currentStepId);
    const curStep = steps[curIdx];
    const [currentStepEl, setCurrentStepEl] = useElement();
    const [stepEls, setStepEls] = useState({});
    const stepsRef = useRef(null);
    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 (_jsx(StyledVerticalStepMarkers, { ref: stepsRef, ...restProps, children: steps.map((step, index) => {
            return (_jsxs(Grid, { as: 'li', container: {
                    cols: '2rem minmax(0, 1fr)',
                    colGap: 1
                }, children: [_jsx(StyledBulletWrapper, { hasNext: index !== steps.length - 1, prior: index < curIdx, 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, prior: index < curIdx, depth: step.depth, onClick: step.onMarkerClick }) }), _jsx(Text, { variant: 'h4', as: StyledStepText, children: step.name })] }, step.id));
        }) }));
};
export default VerticalFormProgress;
//# sourceMappingURL=VerticalFormProgress.js.map