import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useState } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { FixedSizeList as List, } from 'react-window';
import { convertRemToPixels, tableRowHeight, } from './TableUtils';
export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { children: ({ height, width }) => {
        return (_jsx(List, { height: height, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: width, itemKey: itemKey, itemData: rows, ref: listRef, onItemsRendered: ({ visibleStartIndex, visibleStopIndex, overscanStopIndex, }) => {
                setHasScrollbar(visibleStopIndex - visibleStartIndex < overscanStopIndex);
                if (onBottom &&
                    onBottomOffset != null &&
                    overscanStopIndex >= rows.length - 1 - onBottomOffset) {
                    onBottom(rows.length);
                }
            }, children: RenderRow }));
    } }));
export const useTableScrollbar = () => {
    const [hasScrollbar, setHasScrollbar] = useState(false);
    const [scrollBarWidth, setScrollBarWidth] = useState(0);
    const handleScrollbarWidth = useCallback((node) => {
        if (node) {
            const scrollDiv = document.createElement('div');
            scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position:absolute; top:-9999px;');
            node.appendChild(scrollDiv);
            const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
            node.removeChild(scrollDiv);
            setScrollBarWidth(scrollbarWidth);
        }
    }, []);
    return {
        hasScrollbar,
        setHasScrollbar,
        scrollBarWidth,
        handleScrollbarWidth,
    };
};
