"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.DataTable = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("@chakra-ui/react");
const react_table_1 = require("@tanstack/react-table");
const react_2 = require("react");
const DataRowSkeleton_1 = require("./DataRowSkeleton");
const DataTableLoader_1 = require("./DataTableLoader");
const DataTablePagination_1 = require("./DataTablePagination");
/**
 * A data table component that for formatted, paginated data
 *
 * @example
 * ```tsx
 * // Example usage
 * const dataTableProps = useDataTable<DataType>({
 *   queryFn: getPaginatedTestData,
 *   queryKey: "example-key",
 * })
 *
 * return <DataTable<DataType> {...dataTableProps} />
 * ```
 *
 * @param params The props for the data table
 * @returns A formatted data table
 */
const DataTable = ({ title, headerFields, queryResponse, pagination, onPaginationChange, transformer, }) => {
    var _a, _b, _c, _d;
    const data = (_b = (_a = queryResponse.data) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : [];
    const pageCount = Math.floor((_d = (_c = queryResponse.data) === null || _c === void 0 ? void 0 : _c.pageCount) !== null && _d !== void 0 ? _d : 0);
    const columnHelper = (0, react_table_1.createColumnHelper)();
    const columns = (0, react_2.useMemo)(() => [
        {
            header: title,
            columns: headerFields.map((field) => columnHelper.accessor(field, {
                id: field,
                cell: (info) => info.getValue(),
                header: (info) => info.column.id
                    .replace(/([a-z])([A-Z])/g, "$1 $2")
                    .toLocaleUpperCase(),
                footer: (info) => info.column.id,
            })),
        },
    ], [title, columnHelper, headerFields]);
    const table = (0, react_table_1.useReactTable)({
        data: transformer ? transformer(data) : data,
        pageCount,
        columns,
        getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
        getFilteredRowModel: (0, react_table_1.getFilteredRowModel)(),
        state: { pagination },
        onPaginationChange,
        manualPagination: true,
    });
    return ((0, jsx_runtime_1.jsxs)(DataTableContainer, { children: [(0, jsx_runtime_1.jsx)(react_1.TableContainer, Object.assign({ w: "full" }, { children: (0, jsx_runtime_1.jsxs)(react_1.Table, Object.assign({ variant: "simple", bg: "white", rounded: "lg" }, { children: [(0, jsx_runtime_1.jsx)(react_1.Thead, { children: table.getHeaderGroups().map((headerGroup) => ((0, jsx_runtime_1.jsx)(react_1.Tr, { children: headerGroup.headers.map((header) => ((0, jsx_runtime_1.jsx)(StyledTh, Object.assign({ colSpan: header.colSpan }, { children: header.isPlaceholder ? null : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext()) })) }), header.id))) }, headerGroup.id))) }), (0, jsx_runtime_1.jsx)(react_1.Tbody, { children: table.getRowModel().rows.map((row) => ((0, jsx_runtime_1.jsx)(StyledRow, { children: row.getVisibleCells().map((cell) => ((0, jsx_runtime_1.jsx)(StyledCell, { children: queryResponse.isFetching ? ((0, jsx_runtime_1.jsx)(DataRowSkeleton_1.DataRowSkeleton, {})) : ((0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())) }, cell.id))) }, row.id))) })] })) })), (0, jsx_runtime_1.jsx)(DataTableLoader_1.DataTableLoader, { isLoading: queryResponse.isFetching, refetch: queryResponse.refetch }), (0, jsx_runtime_1.jsx)(PaginationContainer, { children: (0, jsx_runtime_1.jsx)(DataTablePagination_1.DataTablePagination, { table: table }) })] }));
};
exports.DataTable = DataTable;
const DataTableContainer = (0, react_1.chakra)(react_1.Flex, {
    baseStyle: {
        flexDirection: "column",
        gap: "10px",
        boxShadow: "base",
        rounded: "lg",
        overflow: "hidden",
        position: "relative",
    },
});
const StyledTh = (0, react_1.chakra)(react_1.Th, {
    baseStyle: {
        fontFamily: "Roboto",
        color: "primaryAccent.500",
        bg: "gray.50",
    },
});
const StyledRow = (0, react_1.chakra)(react_1.Tr, {
    baseStyle: {
        fontSize: "sm",
    },
});
const StyledCell = (0, react_1.chakra)(react_1.Td, {
    baseStyle: {},
});
const PaginationContainer = (0, react_1.chakra)(react_1.Flex, {
    baseStyle: {
        gap: "5px",
        justifyContent: "flex-end",
        p: "10px",
        pt: "0px",
    },
});
//# sourceMappingURL=DataTable.js.map