import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useRef } from 'react';
import { SidebarEmpty } from '../../../../LibrariesSidebar/components/empty/SidebarEmpty';
import { SortableRootRow } from '../../../../LibrariesSidebar/components/list/root/SortableRootRow';
import { SortableRows } from '../../../../LibrariesSidebar/components/list/SortableRows';
import { SidebarLoading } from '../../../../LibrariesSidebar/components/loading/SidebarLoading';
import { ROOT_ROW_HEIGHT } from '../../../../LibrariesSidebar/constants';
import { useSidebarColors } from '../../../../LibrariesSidebar/hooks/useGetSidebarColors';
import { useSortableList } from '../../../../LibrariesSidebar/hooks/useSortableList';
import { getRootListSx, getRootVirtualRowStyle, } from '../../../../LibrariesSidebar/styles';
import useVirtualizer from '../../../../../../hooks/useVirtualizer';
import { Stack, useTheme } from '@mui/material';
export const SidebarRootList = ({ loading }) => {
    const { palette } = useTheme();
    const colors = useSidebarColors();
    const { isSortMode, listItems, handleDragEnd } = useSortableList();
    const scrollElementRef = useRef(null);
    const { virtualRows, rowVirtualizer } = useVirtualizer({
        scrollElementRef,
        registers: listItems,
        virtualizerOptions: {
            count: listItems.length,
            estimateSize: () => ROOT_ROW_HEIGHT,
            getScrollElement: () => scrollElementRef.current,
            overscan: 8,
        },
    });
    const listSx = useMemo(() => getRootListSx(colors), [colors]);
    if (loading)
        return _jsx(SidebarLoading, {});
    if (!listItems.length) {
        return (_jsx(SidebarEmpty, { sx: { backgroundColor: palette.new.background.elements.default } }));
    }
    if (isSortMode) {
        return (_jsx(SortableRows, { items: listItems, onDragEnd: handleDragEnd, renderRow: item => _jsx(SortableRootRow, { item: item }), sx: listSx }));
    }
    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", { style: getRootVirtualRowStyle(virtualRow.start), children: _jsx(SortableRootRow, { item: item }) }, item.id));
            }) }) }));
};
