import { useLayoutEffect, useRef, useState } from 'react';
import { remToPx, stripUnit } from 'polished';
import { useChToPxConversionFactor, useTheme } from '../../hooks';
import { tryCatch } from '../../utils';
import { stepItemMinWidth, stepMarkerMinWidth } from './FormProgress.styles';
export const useFormProgressOverflow = (numberOfSteps, withLabels) => {
    const ref = useRef(null);
    const [state, setState] = useState(undefined);
    const chToPxConversionFactor = useChToPxConversionFactor();
    const itemWidth = withLabels
        ? chToPxConversionFactor * stepItemMinWidth
        : chToPxConversionFactor * stepMarkerMinWidth;
    const theme = useTheme();
    const itemSpacing = Number(stripUnit(tryCatch(() => remToPx(theme.base.spacing), () => '16px')));
    useLayoutEffect(() => {
        const ol = ref.current;
        if (!ol)
            return;
        const ro = new ResizeObserver(() => {
            const olWidth = ol.offsetWidth ?? 0;
            // Adding 1 to maxVisibleItems to account for the fact that the first and last item are half size,
            // so their overall width is equal to itemWidth, but need to be counted as 2 items
            const maxVisibleItems = Math.floor(olWidth / (itemWidth + itemSpacing) + 1);
            const itemsOverflowing = numberOfSteps > maxVisibleItems;
            setState(itemsOverflowing);
        });
        ro.observe(ol);
        return () => {
            ro.disconnect();
        };
    }, [itemWidth, itemSpacing, numberOfSteps]);
    return { ref, state };
};
export default useFormProgressOverflow;
//# sourceMappingURL=useFormProgressOverflow.js.map