import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useEffect } from 'react';
import { areEqual } from 'react-window';
import { useTableContext } from './Tablev2.component';
import { HeadRow, TableRow, TableBody, TableHeader, NoResult, SortCaret, } from './Tablestyle';
import { useTableScrollbar, VirtualizedRows } from './TableCommon';
import useSyncedScroll from './useSyncedScroll';
import { Loader } from '../loader/Loader.component';
import { Box } from '../box/Box';
import { spacing } from '../../spacing';
const translations = {
    en: {
        noResult: 'No results found',
    },
    fr: {
        noResult: `Aucun résultat`,
    },
};
export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', backgroundVariant = 'backgroundLevel1', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
    if (selectedId && !onRowSelected) {
        console.error('Please specify the onRowSelected function.');
    }
    const { bodyRef, headerRef } = useSyncedScroll();
    const { headerGroups, prepareRow, rows, onBottom, onBottomOffset, setRowHeight, } = useTableContext();
    useEffect(() => {
        setRowHeight(rowHeight);
    }, [rowHeight, setRowHeight]);
    const RenderRow = memo(({ index, style }) => {
        const row = rows[index];
        prepareRow(row);
        let rowProps = row.getRowProps({
            /**
             * Note: We need to pass the style property to the row component.
             * Otherwise when we scroll down, the next rows are flashing
             * because they are re-rendered in loop.
             */
            style: { ...style },
        });
        rowProps = {
            ...rowProps,
            ...{
                onClick: () => {
                    if (onRowSelected)
                        return onRowSelected(row);
                },
            },
        };
        return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant, backgroundVariant: backgroundVariant, selectedId: selectedId, className: "tr", children: row.cells.map((cell) => {
                let cellProps = cell.getCellProps({
                    style: {
                        ...cell.column.cellStyle,
                        // Vertically center the text in cells.
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                    },
                    role: 'gridcell',
                });
                return (_jsx("div", { ...cellProps, className: "td", children: cell.render('Cell') }));
            }) }));
    }, areEqual);
    const { hasScrollbar, setHasScrollbar, scrollBarWidth, handleScrollbarWidth, } = useTableScrollbar();
    function itemKey(index, data) {
        if (typeof customItemKey === 'function') {
            return customItemKey(index, data);
        }
        return index;
    }
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "thead", role: "rowgroup", children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), ref: headerRef, hasScrollBar: hasScrollbar, scrollBarWidth: scrollBarWidth, rowHeight: rowHeight, style: { overflow: 'hidden' }, children: headerGroup.headers.map((column) => {
                        const headerStyleProps = column.getHeaderProps(Object.assign(column.getSortByToggleProps(), {
                            style: { ...column.cellStyle, position: 'relative' },
                        }));
                        return (_jsx(TableHeader, { ...headerStyleProps, role: "columnheader", children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: typeof children === 'function' ? (children(_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow }))) : rows.length ? (_jsx(VirtualizedRows, { rows: rows, listRef: bodyRef, itemKey: itemKey, rowHeight: rowHeight, setHasScrollbar: setHasScrollbar, onBottom: onBottom, onBottomOffset: onBottomOffset, RenderRow: RenderRow })) : (_jsx(NoResult, { children: translations[locale].noResult })) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
}
