import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { ThemeProvider } from '@emotion/react';
import Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
import { flexRender, getCoreRowModel, getFilteredRowModel, useReactTable, } from '@tanstack/react-table';
import { tableTheme } from './AppTableTheme';
import './styles.scss';
import { useEffect } from 'react';
export default function AppTableList({ columns, data, className = '', onClickRow, onMouseEnter, onMouseLeave, hiddenColumns, filter, }) {
    const columnVisibility = hiddenColumns?.reduce((acc, key) => {
        acc[key] = false;
        return acc;
    }, {});
    const table = useReactTable({
        data,
        columns,
        state: {
            columnVisibility,
        },
        getCoreRowModel: getCoreRowModel(),
        getFilteredRowModel: getFilteredRowModel(),
    });
    const handleClickRow = (row) => {
        if (onClickRow)
            onClickRow(row.original);
    };
    useEffect(() => {
        if (!filter)
            return;
        if (filter[1]) {
            table.getColumn(filter[0])?.setFilterValue(filter[1]);
        }
        else {
            table.getColumn(filter[0])?.setFilterValue(undefined);
        }
    }, [filter]);
    const tableClass = cx('ds-table', {
        [className || '']: className || '',
    });
    return (_jsx(ThemeProvider, { theme: tableTheme, children: _jsx("div", { className: tableClass, children: _jsx(TableContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableCell, { style: { width: header.getSize() }, children: header.isPlaceholder
                                        ? null
                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.map((row) => (_jsx(TableRow, { onClick: () => handleClickRow(row), onMouseEnter: () => onMouseEnter?.(row), onMouseLeave: () => onMouseLeave?.(row), children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] }) }) }) }));
}
