"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TableBasic = void 0;
const react_1 = __importStar(require("react"));
const react_table_1 = require("react-table");
const Flex_1 = require("../Flex");
const Box_1 = require("../Box");
const Text_1 = require("../Text");
const IconCircled_1 = require("../IconCircled");
const Loading_1 = require("../Loading");
const TablePagination_1 = require("./TablePagination");
const TableBatchActions_1 = require("./TableBatchActions");
const TableEditableCell_1 = require("./TableEditableCell");
const TableRowActions_1 = require("./TableRowActions");
const sc = __importStar(require("./styles"));
const icons_1 = require("../../assets/images/icons");
exports.TableBasic = ({ title, empty, columns, data = [], updateData, batchActions, rowActions, deleteRow, subRow, defaultSort, sortable, selectable, pageSize: pageSizeProp, pageSizes, canSkip, isLoading, refresh, lastUpdate, noHeader, onRowClick, }) => {
    const hasData = data.length > 0;
    const paginate = pageSizeProp && pageSizeProp > 1;
    const [skipTableReset, setSkipTableReset] = react_1.useState(false);
    const [showBatchActions, setShowBatchActions] = react_1.useState(false);
    const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows, page, canPreviousPage, canNextPage, nextPage, previousPage, setPageSize, pageCount, gotoPage, state: { pageIndex, pageSize, selectedRowIds }, } = react_table_1.useTable({
        data,
        columns,
        autoResetPage: !skipTableReset,
        autoResetSortBy: !skipTableReset,
        // autoResetSelectedRows: !skipTableReset,
        initialState: Object.assign(Object.assign(Object.assign({}, (defaultSort
            ? {
                sortBy: [
                    {
                        id: defaultSort.accessor,
                        desc: defaultSort.desc || false,
                    },
                ],
            }
            : {})), { pageIndex: 0 }), (paginate ? { pageSize: pageSizeProp } : {})),
    }, react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, (hooks) => TableRowActions_1.TableRowActions({
        hooks,
        selectable,
        setShowBatchActions,
        rowActions,
        deleteRow,
        subRow,
        setSkipTableReset,
    }));
    const selectedRowIndices = Object.keys(selectedRowIds);
    const totalSelectedRows = selectedRowIndices.length;
    const selectedData = data.filter((entry, index) => selectedRowIndices.includes(`${index}`));
    return (react_1.default.createElement(sc.TableWrapper, null,
        (title || (!!batchActions && batchActions.length > 0)) && (react_1.default.createElement(Flex_1.Flex, { justifyContent: "space-between", p: "s", mb: "32px" },
            react_1.default.createElement(Box_1.Box, { lineHeight: "50px" }, title),
            react_1.default.createElement(Box_1.Box, null, batchActions && batchActions.length > 0 && (react_1.default.createElement(TableBatchActions_1.TableBatchActions, { batchActions: batchActions, showBatchActions: showBatchActions, totalSelectedRows: totalSelectedRows, selectedData: selectedData, selectedRowIndices: selectedRowIndices, refresh: refresh, lastUpdate: lastUpdate, isLoading: isLoading }))))),
        isLoading ? (react_1.default.createElement(Flex_1.Flex, { justifyContent: "center", my: "l" },
            react_1.default.createElement(Loading_1.Loading, null))) : hasData ? (react_1.default.createElement(sc.Table, Object.assign({}, getTableProps()),
            !noHeader && (react_1.default.createElement(sc.TableHeader, null, headerGroups.map((headerGroup, rowIndex) => (react_1.default.createElement(sc.TableRow, Object.assign({ key: `headerRow${rowIndex}` }, headerGroup.getHeaderGroupProps(), (rowIndex === 0 ? { className: 'hide' } : {})), headerGroup.headers.map((column, colIndex) => (react_1.default.createElement(sc.TableColumnHeader, Object.assign({ key: `headerRow${rowIndex}Column${colIndex}` }, column.getHeaderProps(sortable ? column.getSortByToggleProps() : undefined), (column.getCustomHeaderProperties &&
                column.getCustomHeaderProperties(rowIndex))),
                react_1.default.createElement(Text_1.Text, { variant: "b2m", color: column.isSorted ? 'brandMain' : 'gray.2' },
                    column.render('Header'),
                    react_1.default.createElement("span", { dangerouslySetInnerHTML: {
                            __html: column.isSorted
                                ? column.isSortedDesc
                                    ? ' &darr;'
                                    : ' &uarr;'
                                : '',
                        } })))))))))),
            react_1.default.createElement(sc.TableBody, Object.assign({}, getTableBodyProps()), (paginate ? page : rows).map((row, rowIndex) => {
                prepareRow(row);
                return (react_1.default.createElement(react_1.Fragment, { key: `bodyRow${rowIndex}Fragment` },
                    react_1.default.createElement(sc.TableRow, Object.assign({ key: `bodyRow${rowIndex}` }, row.getRowProps(), (row.isSelected ? { className: 'selected' } : {}), (onRowClick
                        ? { onClick: () => onRowClick(row.original, rowIndex) }
                        : {})), row.cells.map((cell, colIndex) => {
                        return (react_1.default.createElement(sc.TableColumn, Object.assign({ key: `bodyRow${rowIndex}Column${colIndex}` }, Object.assign(Object.assign({}, cell.getCellProps()), (cell.column.getCustomCellProperties &&
                            cell.column.getCustomCellProperties(rowIndex))), (cell.column.width
                            ? { width: cell.column.width }
                            : {}), (cell.column.cellTextAlign
                            ? { textAlign: cell.column.cellTextAlign }
                            : {})), cell.column.id === 'selection' ||
                            cell.column.id === 'deletion' ? (cell.render('Cell')) : (react_1.default.createElement(TableEditableCell_1.TableEditableCell, { cell: cell, data: data, updateData: updateData, setSkipTableReset: setSkipTableReset }))));
                    })),
                    subRow && row.isExpanded && (react_1.default.createElement(sc.TableRow, { key: `bodyRow${rowIndex}SubRow` },
                        react_1.default.createElement(sc.TableColumn, { colSpan: row.cells.length }, subRow(row.original, row.index))))));
            })))) : (react_1.default.createElement(Flex_1.Flex, { justifyContent: "center", flexDirection: "column", mt: "l", mb: "m" },
            empty && empty.icon === false
                ? null
                : (empty && empty.icon) || (react_1.default.createElement(IconCircled_1.IconCircled, { Asset: icons_1.SvgAccountGroup, bg: "gray.4", color: "gray.3", width: 48, height: 48, scale: 0.8 })),
            empty && empty.copy === false
                ? null
                : (empty && empty.copy) || (react_1.default.createElement(Text_1.Text, { fontSize: "2", color: "gray.2", mt: "m" }, "No data")))),
        hasData && paginate && (react_1.default.createElement(TablePagination_1.TablePagination, Object.assign({ canPreviousPage: canPreviousPage, canNextPage: canNextPage, nextPage: nextPage, previousPage: previousPage, setPageSize: setPageSize, totalRows: rows.length, pageIndex: pageIndex, pageSize: pageSize, pageSizes: pageSizes }, (canSkip
            ? {
                pageCount,
                gotoPage,
            }
            : {}))))));
};
//# sourceMappingURL=TableBasic.js.map