"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOverflowingHorizontalItems = useOverflowingHorizontalItems;
const tslib_1 = require("tslib");
const react_1 = require("react");
const debounce_1 = tslib_1.__importDefault(require("lodash/debounce.js"));
function useOverflowingHorizontalItems({ containerRef, items, itemSelector, moreButtonSelector, marginBetweenItems = 0, }) {
    const [containerWidth, setContainerWidth] = (0, react_1.useState)(0);
    const [itemWidths, setItemWidths] = (0, react_1.useState)([]);
    const [moreButtonWidth, setMoreButtonWidth] = (0, react_1.useState)(0);
    (0, react_1.useLayoutEffect)(() => {
        const measureItemSizes = () => {
            const itemElements = Array.from(containerRef.current?.querySelectorAll(itemSelector) ?? []);
            const moreButton = containerRef.current?.querySelector(moreButtonSelector);
            setItemWidths(itemElements.map((item) => item.clientWidth));
            if (moreButton) {
                setMoreButtonWidth(moreButton.clientWidth);
            }
        };
        requestAnimationFrame(measureItemSizes);
    }, [containerRef, itemSelector, moreButtonSelector]);
    (0, react_1.useLayoutEffect)(() => {
        const container = containerRef.current;
        if (!container) {
            return;
        }
        const updateContainerSize = (entries) => {
            if (entries.length > 0) {
                setContainerWidth(entries[0].contentRect.width);
            }
        };
        const updateContainerSizeDebounced = (0, debounce_1.default)(updateContainerSize, 100);
        const containerResizeObserver = new ResizeObserver(updateContainerSizeDebounced);
        containerResizeObserver.observe(container);
        return () => containerResizeObserver.unobserve(container);
    }, [containerRef]);
    const isMeasured = itemWidths.length > 0;
    const { visibleItems, hiddenItems } = (0, react_1.useMemo)(() => {
        if (!isMeasured) {
            return {
                visibleItems: items ?? [],
                hiddenItems: [],
            };
        }
        const itemsCount = itemWidths.length;
        let visibleItemsCount = 0;
        const spaceForMoreButton = moreButtonWidth + marginBetweenItems;
        let remainingContainerWidth = containerWidth;
        for (const width of itemWidths) {
            const itemWidthWithMargin = width + marginBetweenItems;
            remainingContainerWidth -= itemWidthWithMargin;
            if (remainingContainerWidth < spaceForMoreButton) {
                const isMoreThanOneItemLeft = itemsCount !== visibleItemsCount + 1;
                const hasNoSpaceForTheLastItem = remainingContainerWidth < 0;
                if (isMoreThanOneItemLeft || hasNoSpaceForTheLastItem) {
                    break;
                }
            }
            visibleItemsCount++;
        }
        return {
            visibleItems: items?.slice(0, visibleItemsCount) ?? [],
            hiddenItems: items?.slice(visibleItemsCount) ?? [],
        };
    }, [containerWidth, isMeasured, itemWidths, items, marginBetweenItems, moreButtonWidth]);
    return { visibleItems, hiddenItems, measured: isMeasured };
}
//# sourceMappingURL=useOverflowingHorizontalItems.js.map
