import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import { useCallback, memo, useEffect, useState, useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { removeLeadingSlash } from '@redocly/theme/core/openapi';
const INITIAL_VISIBLE_ITEMS = 3;
const BUFFER_ITEMS = 1;
const FULL_LIST_DELAY = 1000;
const VirtualListComponent = ({ items = [], renderItem, routingBasePath, }) => {
    const basePath = routingBasePath || '/';
    const location = useLocation();
    const pathname = removeLeadingSlash(location.pathname.replace(basePath, ''));
    const findActiveItemIndex = useMemo(() => {
        const itemMap = new Map(items.map((item, index) => [removeLeadingSlash(item.href), index]));
        return (pathname) => (pathname ? itemMap.get(pathname) : undefined);
    }, [items]);
    const getVisibleRange = useCallback((pathname) => {
        const currentIndex = findActiveItemIndex(pathname);
        const start = Math.max(0, currentIndex ? currentIndex - BUFFER_ITEMS : 0);
        const end = Math.min(items.length, currentIndex ? currentIndex + BUFFER_ITEMS + 1 : INITIAL_VISIBLE_ITEMS);
        return { start, end };
    }, [findActiveItemIndex, items.length]);
    const [visibleItems, setVisibleItems] = useState(() => {
        const { start, end } = getVisibleRange(pathname);
        return items.slice(start, end);
    });
    useEffect(() => {
        const timeoutId = setTimeout(() => {
            setVisibleItems(items);
        }, FULL_LIST_DELAY);
        return () => clearTimeout(timeoutId);
    }, [items]);
    return _jsx(_Fragment, { children: visibleItems.map(renderItem) });
};
export const VirtualList = memo(VirtualListComponent);
//# sourceMappingURL=VirtualList.js.map