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';
import { useTableContext } from './Tablev2.component';
import useSyncedScroll from './useSyncedScroll';
import { UnsuccessfulResult } from '../UnsuccessfulResult.component';
export const VirtualizedRows = ({ rows, rowHeight, setHasScrollbar, onBottom, onBottomOffset, RenderRow, listRef, itemKey, }) => (_jsx(AutoSizer, { disableWidth: true, children: ({ height }) => {
        return (_jsx(List, { height: height - 1, itemCount: rows.length, itemSize: convertRemToPixels(tableRowHeight[rowHeight]), width: '100%', 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 } = useTableContext();
    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,
    };
};
export function TableRows({ locale, children, customItemKey, RenderRow }) {
    const { setHasScrollbar } = useTableScrollbar();
    const { rows, status, entityName, rowHeight, onBottom, onBottomOffset } = useTableContext();
    const { bodyRef } = useSyncedScroll();
    function itemKey(index, data) {
        if (typeof customItemKey === 'function') {
            return customItemKey(index, data);
        }
        return index;
    }
    if (status === 'idle' || status === 'loading' || status === 'error') {
        return (_jsx(UnsuccessfulResult, { name: entityName, status: status, locale: locale, rowHeight: rowHeight }));
    }
    if (status === 'success' || status === undefined) {
        if (typeof children === 'function') {
            if (rows.length) {
                return children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }));
            }
            else {
                return children(_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));
            }
        }
        else if (rows.length) {
            return (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, itemKey: itemKey, rowHeight: rowHeight, RenderRow: RenderRow }));
        }
        else {
            return (_jsx(UnsuccessfulResult, { rowHeight: rowHeight, name: entityName, status: "noResult" }));
        }
    }
    return null;
}
