"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.StepSlider = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_2 = require("react");
const Slide_1 = require("../transitions/Slide");
const useId_1 = require("../useId");
const styles_1 = require("./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;
};
/**
 * Компонент предназначенный для анимированного переключения активного элемента
 */
const StepSlider = ({ activeStep, steps, className, isFullWidth, slideProps: { mountOnEnter = true, unmountOnExit = true, easing = DEFAULT_EASING, ...restSlideProps } = {}, }) => {
    const keyId = (0, useId_1.useId)();
    const containerRef = (0, react_2.useRef)(globalThis.document?.body);
    const [currentStep, setCurrentStep] = (0, react_2.useState)(activeStep);
    const [directionMap, setDirectionMap] = (0, react_2.useState)(() => createDirectionMap(activeStep, activeStep, steps));
    (0, react_2.useEffect)(() => {
        if (activeStep !== currentStep) {
            setDirectionMap(createDirectionMap(currentStep, activeStep, steps));
            setCurrentStep(activeStep);
        }
    }, [activeStep, currentStep, steps]);
    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: containerRef, className: className, isFullWidth: isFullWidth, children: steps.map(({ component, id }, index) => ((0, react_1.createElement)(Slide_1.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 },
            (0, jsx_runtime_1.jsx)(styles_1.Item, { children: component })))) }));
};
exports.StepSlider = StepSlider;
