import { useEffect, useRef } from 'react';
import { useViewportType } from '../../useViewportType';
import { MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS } from '../constants';
import { validateStepperProps } from './utils';
export const useLogic = ({ orientation = 'horizontal', connector = 'line', alternativeLabel = false, activeStep = 0, onClickPrevStep, onClickStep, className, children, }) => {
    useEffect(() => {
        validateStepperProps({ orientation, connector, alternativeLabel });
    }, []);
    const { isMobile } = useViewportType();
    // На разрешении sm и ниже connector line + alternativeLabel выглядит как connector arrow без alternativeLabel
    const isMobileDisplayStepper = isMobile && orientation === 'horizontal' && connector === 'line';
    const stepperConnector = isMobileDisplayStepper ? 'arrow' : connector;
    const stepperAlternativeLabel = isMobileDisplayStepper
        ? false
        : alternativeLabel;
    const containerRef = useRef(null);
    useEffect(() => {
        if (!isMobile || !containerRef.current) {
            return;
        }
        const container = containerRef.current;
        const runScroll = () => {
            const activeStepElement = container.querySelector('[data-active-step="true"]');
            if (activeStepElement) {
                activeStepElement.scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest',
                    inline: 'center',
                });
            }
        };
        setTimeout(() => {
            runScroll();
        }, MOBILE_ACTIVE_STEP_SCROLL_DEFER_MS);
    }, [activeStep, isMobile, orientation]);
    return {
        containerRef,
        stepperConnector,
        stepperAlternativeLabel,
        activeStep,
        onClickPrevStep,
        orientation,
        onClickStep,
        className,
        children,
    };
};
