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, SortCaret, } from './Tablestyle';
import { TableRows, useTableScrollbar } from './TableCommon';
import useSyncedScroll from './useSyncedScroll';
import { Loader } from '../loader/Loader.component';
import { Box } from '../box/Box';
import { spacing } from '../../spacing';
export function SingleSelectableContent({ rowHeight = 'h40', separationLineVariant = 'backgroundLevel3', locale = 'en', selectedId, isLoadingMoreItems, onRowSelected, customItemKey, children, }) {
    if (selectedId && !onRowSelected) {
        console.error('Please specify the onRowSelected function.');
    }
    const { headerRef } = useSyncedScroll();
    const { headerGroups, prepareRow, rows, 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);
                },
                tabIndex: onRowSelected ? 0 : undefined,
                onKeyDown: (event) => {
                    if (onRowSelected &&
                        (event.key === ' ' ||
                            event.key === 'Enter' ||
                            event.key === 'Spacebar')) {
                        event.preventDefault();
                        onRowSelected(row);
                    }
                },
            },
        };
        return (_jsx(TableRow, { ...rowProps, isSelected: selectedId === row.id, "aria-selected": selectedId === row.id ? 'true' : 'false', separationLineVariant: separationLineVariant, 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, scrollBarWidth, handleScrollbarWidth } = useTableScrollbar();
    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "thead", role: "rowgroup", children: headerGroups.map((headerGroup) => (_jsx(HeadRow, { ...headerGroup.getHeaderGroupProps(), ref: headerRef, separationLineVariant: separationLineVariant, 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", tabIndex: !column.disableSortBy ? 0 : undefined, onKeyDown: (event) => {
                                if (!column.disableSortBy &&
                                    (event.key === ' ' ||
                                        event.key === 'Enter' ||
                                        event.key === 'Spacebar')) {
                                    event.preventDefault();
                                    // @ts-expect-error - getSortByToggleProps is joined to getHeaderProps
                                    headerStyleProps.onClick(event);
                                }
                            }, children: _jsxs("div", { children: [column.render('Header'), _jsx(SortCaret, { column: column })] }) }));
                    }) }))) }), _jsx(TableBody, { role: "rowgroup", className: "tbody", ref: handleScrollbarWidth, children: _jsx(TableRows, { locale: locale, children: children, customItemKey: customItemKey, RenderRow: RenderRow }) }), isLoadingMoreItems && (_jsx(Box, { display: "flex", justifyContent: "center", marginTop: spacing.r16, marginBottom: spacing.r16, children: _jsx(Loader, { size: "large" }) }))] }));
}
