import { jsx as _jsx } from "react/jsx-runtime";
import { useRef } from 'react';
import { SidebarEmpty } from '../../../../LibrariesSidebar/components/empty/SidebarEmpty';
import { SidebarChildRow } from '../../../../LibrariesSidebar/components/list/children/SidebarChildRow';
import { SortableRows } from '../../../../LibrariesSidebar/components/list/SortableRows';
import { SidebarLoading } from '../../../../LibrariesSidebar/components/loading/SidebarLoading';
import { ROOT_ROW_HEIGHT } from '../../../../LibrariesSidebar/constants';
import { useSidebarContext } from '../../../../LibrariesSidebar/context';
import { useSidebarColors } from '../../../../LibrariesSidebar/hooks/useGetSidebarColors';
import { useSortableList } from '../../../../LibrariesSidebar/hooks/useSortableList';
import { getChildrenListSx, getChildVirtualRowStyle, } from '../../../../LibrariesSidebar/styles';
import useVirtualizer from '../../../../../../hooks/useVirtualizer';
import { Stack } from '@mui/material';
export const SidebarChildrenList = ({ loading, parentId, onAdd, depth = 0, }) => {
    const colors = useSidebarColors();
    const { getTreeItem } = useSidebarContext();
    const { isSortMode, listItems, handleDragEnd } = useSortableList(parentId);
    // Only the top-level list owns the scroll container, so virtualization is
    // scoped to it. Nested levels render inline inside their parent's measured
    // row (no nested scroll containers).
    const isVirtualized = depth === 0;
    const scrollElementRef = useRef(null);
    const { virtualRows, rowVirtualizer } = useVirtualizer({
        scrollElementRef,
        registers: listItems,
        virtualizerOptions: {
            count: listItems.length,
            estimateSize: () => ROOT_ROW_HEIGHT,
            getScrollElement: () => scrollElementRef.current,
            overscan: 8,
            enabled: isVirtualized,
        },
    });
    const parentAtLimit = Boolean(getTreeItem(parentId)?.hasReachedLimit);
    const listSx = getChildrenListSx(colors);
    if (loading)
        return _jsx(SidebarLoading, {});
    if (!listItems.length && !parentAtLimit)
        return _jsx(SidebarEmpty, {});
    const renderRow = (item) => (_jsx(SidebarChildRow, { item: item, depth: depth, onAdd: onAdd }));
    // Only use SortableRows when in sort mode.
    if (isSortMode) {
        return (_jsx(SortableRows, { items: listItems, onDragEnd: handleDragEnd, renderRow: renderRow, sx: listSx }));
    }
    // Nested levels render inline so the parent virtualized row measures their
    // full expanded height.
    if (!isVirtualized) {
        return (_jsx(Stack, { sx: listSx, children: listItems.map(item => (_jsx(SidebarChildRow, { item: item, depth: depth, onAdd: onAdd }, item.id))) }));
    }
    return (_jsx(Stack, { ref: scrollElementRef, sx: listSx, children: _jsx(Stack, { style: {
                height: `${rowVirtualizer.getTotalSize()}px`,
                width: '100%',
                position: 'relative',
            }, children: virtualRows.map(virtualRow => {
                const item = listItems[virtualRow.index];
                if (!item)
                    return null;
                return (_jsx("div", { "data-index": virtualRow.index, ref: rowVirtualizer.measureElement, style: getChildVirtualRowStyle(virtualRow.start), children: _jsx(SidebarChildRow, { item: item, depth: depth, onAdd: onAdd }) }, item.id));
            }) }) }));
};
