import { useEffect, useRef, useState } from "react";
/**
 * This hook receives a base width of an element and returns how much items fit **vertically** inside the referenced html element
 *
 * @param baseWidth The base width of each element
 */
export default function useElementFit(baseWidth, baseHeight) {
    const ref = useRef(undefined);
    function calculateDimension() {
        function howManyItemsStackVertically() {
            if (!ref.current || baseHeight === undefined)
                return 1;
            return Math.floor(ref.current.clientHeight / baseHeight);
        }
        if (window.PRERENDER)
            return {
                howManyItemsWillBeVisible: 4,
                byRow: 4,
            };
        const width = ref.current?.clientWidth || window.visualViewport.width;
        const maxItemsHorizontally = Math.floor(width / baseWidth) || 1;
        return {
            howManyItemsWillBeVisible: maxItemsHorizontally * howManyItemsStackVertically(),
            byRow: maxItemsHorizontally,
        };
    }
    const [itemsToShow, setItemsToShow] = useState(window.PRERENDER
        ? {
            byRow: 4,
            howManyItemsWillBeVisible: 4,
        }
        : undefined);
    useEffect(() => {
        setItemsToShow(calculateDimension());
        function onResize() {
            setItemsToShow(calculateDimension());
        }
        window.addEventListener("resize", onResize);
        return () => {
            window.removeEventListener("resize", onResize);
        };
    }, []);
    return {
        howManyItemsFit: itemsToShow?.howManyItemsWillBeVisible,
        howManyItemsFitWithExtraRow: itemsToShow
            ? itemsToShow.howManyItemsWillBeVisible + itemsToShow.byRow
            : undefined,
        anItemMore: itemsToShow
            ? itemsToShow.howManyItemsWillBeVisible + 1
            : undefined,
        howManyItemsByRow: itemsToShow?.byRow,
        ref,
    };
}
//# sourceMappingURL=useElementFit.js.map