import { jsx as _jsx } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import { useEffect, useRef, useState } from 'react';
import { Slide } from '../transitions/Slide';
import { useId } from '../useId';
import { Item, Wrapper } from './styles';
const TO_LEFT = 'left';
const TO_RIGHT = 'right';
const DEFAULT_EASING = {
    enter: 'ease-out',
    exit: 'ease-in',
};
const createDirectionMap = (current, prev, steps) => {
    const prevIndex = steps.findIndex(({ id }) => id === prev);
    const currentIndex = steps.findIndex(({ id }) => id === current);
    const commonDirection = prevIndex < currentIndex ? TO_RIGHT : TO_LEFT;
    const res = new Map();
    steps.forEach(({ id }) => {
        if (current === id) {
            // если запрошенный id совпадает с текущим активным
            // выдаем для него обратное направление относительно нового активного шага
            // ибо специфика Slide компонента заставляет его анимироваться при закрытии,
            // туда же, откуда появился. Т.е. если direction=left, компонент появится слева,
            // и при закрытии будет уходить влево. Цель добиться, визуала как в слайдере
            res.set(id, commonDirection === TO_RIGHT ? TO_LEFT : TO_RIGHT);
        }
        else {
            res.set(id, commonDirection);
        }
    });
    return res;
};
/**
 * Компонент предназначенный для анимированного переключения активного элемента
 */
export const StepSlider = ({ activeStep, steps, className, isFullWidth, slideProps: { mountOnEnter = true, unmountOnExit = true, easing = DEFAULT_EASING, ...restSlideProps } = {}, }) => {
    const keyId = useId();
    const containerRef = useRef(globalThis.document?.body);
    const [currentStep, setCurrentStep] = useState(activeStep);
    const [directionMap, setDirectionMap] = useState(() => createDirectionMap(activeStep, activeStep, steps));
    useEffect(() => {
        if (activeStep !== currentStep) {
            setDirectionMap(createDirectionMap(currentStep, activeStep, steps));
            setCurrentStep(activeStep);
        }
    }, [activeStep, currentStep, steps]);
    return (_jsx(Wrapper, { ref: containerRef, className: className, isFullWidth: isFullWidth, children: steps.map(({ component, id }, index) => (_createElement(Slide, { ...restSlideProps, 
            // biome-ignore lint/suspicious/noArrayIndexKey: Используется вместе с keyId
            key: `${keyId}_${index}`, container: () => containerRef.current, easing: easing, mountOnEnter: mountOnEnter, unmountOnExit: unmountOnExit, in: id === currentStep, direction: directionMap.get(id), appear: false },
            _jsx(Item, { children: component })))) }));
};
