import React, { forwardRef, useMemo, useState } from 'react';
import { Box, SkeletonGroup, SkeletonLine, Table, } from '@wix/design-system';
import { ResponsiveColumnsState } from '../../state';
import { observer } from 'mobx-react-lite';
export function _TableSkeleton(props) {
    const { state, dataHook, rowsCount = 7, showTitleBar, ...rest } = props;
    const [{ columnCount, minItemWidth, itemsContentWidth }] = useState(() => new ResponsiveColumnsState({
        gridState: {
            gap: 24,
        },
        minItemWidth: 192,
        rectState: state.toolbarRect,
        containerPadding: 48,
    }));
    const data = useMemo(() => new Array(rowsCount)
        .fill(null)
        .map((_, i) => ({ id: `skeleton-row-${i}` })), [rowsCount]);
    const columns = useMemo(() => new Array(columnCount).fill(null).map((_, i) => ({
        title: '',
        key: `skeleton-column-${i}`,
        dataHook: `skeleton-column-${i}`,
        render: () => (React.createElement(Box, { direction: "vertical", width: "100%", minWidth: `${minItemWidth}px` },
            React.createElement(SkeletonGroup, null,
                React.createElement(SkeletonLine, { width: "100%", marginTop: "SP1", marginBottom: "SP1" })))),
    })), [columnCount]);
    const [TrElementType] = useState(() => forwardRef(({ rowData: _rowData, ...trProps }, ref) => {
        // <TableSkeleton/> is rendered inside the main <Table/> component, so we need to remove the data-table-row attribute from the <tr/> element to make testkit not to consider skeleton rows as real rows
        return React.createElement("tr", { ref: ref, ...trProps, "data-table-row": undefined });
    }));
    if (!itemsContentWidth && process.env.NODE_ENV !== 'test') {
        return null;
    }
    return (
    // <Box/> wrapper always aligns the skeleton to the top of the table
    React.createElement(Box, { marginBottom: "auto", dataHook: dataHook },
        React.createElement(Table, { skin: "neutral", data: data, columns: columns, withWrapper: false, ...{ TrElementType }, ...rest },
            React.createElement(Box, { direction: "vertical", backgroundColor: "D80", borderRadius: "0px 0px 8px 8px", overflow: "hidden" },
                React.createElement(Table.Content, { titleBarVisible: showTitleBar && state.collection.showInitialLoader })))));
}
export const TableSkeleton = observer(_TableSkeleton);
//# sourceMappingURL=TableSkeleton.js.map