var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { useMemo } from 'react';
import Skeleton from '@mui/material/Skeleton';
import { BasicTable } from '../BasicTable';
import { useStyles } from './styles';
var MAX_HEIGHT = 477;
var DefaultRowCellRenderer = function () {
    var styles = useStyles();
    return React.createElement(Skeleton, { className: styles.rowSkeleton });
};
export var TableSkeleton = function (_a) {
    var tableColumnsData = _a.tableColumnsData, RowCellRenderer = _a.RowCellRenderer, props = __rest(_a, ["tableColumnsData", "RowCellRenderer"]);
    var styles = useStyles();
    var tableRowsData = useMemo(function () {
        var entries = tableColumnsData.map(function (column) { return [column.id, []]; });
        var skeletonRow = Object.fromEntries(entries);
        return [__assign(__assign({}, skeletonRow), { value: { label: '', value: {}, uri: 'skeleton' } })];
    }, [tableColumnsData]);
    var renderRowCell = function (props) {
        return RowCellRenderer ? React.createElement(RowCellRenderer, __assign({}, props)) : React.createElement(DefaultRowCellRenderer, null);
    };
    return (React.createElement(BasicTable, __assign({ autosizing: true, containerClassName: styles.container, columnsData: tableColumnsData, rowsData: tableRowsData, defaultColumnMinWidth: 200, defaultColumnWidth: 250, headRowHeight: 48, renderRowCell: renderRowCell, maxHeight: MAX_HEIGHT }, props)));
};
