1import {
 2    ColumnDef,
 3    flexRender,
 4} from "@tanstack/react-table"
 5import {
 6    Table,
 7    TableBody,
 8    TableCell,
 9    TableHead,
10    TableHeader,
11    TableRow,
12} from "@marzneshin/components"
13
14import { useTranslation } from "react-i18next"
15import { useEntityTableContext } from "./entity-table-provider"
16import { LoaderCircle } from "lucide-react"
17
18interface DataTableProps<TData, TValue> {
19    columns: ColumnDef<TData, TValue>[]
20    onRowClick?: (object: TData) => void
21}
22
23export function EntityDataTable<TData, TValue>({
24    columns,
25    onRowClick,
26}: DataTableProps<TData, TValue>) {
27    const { t } = useTranslation();
28    const { table, isLoading } = useEntityTableContext()
29    return (
30        <Table className="w-full">
31            <TableHeader>
32                {table.getHeaderGroups().map((headerGroup) => (
33                    <TableRow key={headerGroup.id}>
34                        {headerGroup.headers.map((header) => {
35                            return (
36                                <TableHead key={header.id}>
37                                    {header.isPlaceholder
38                                        ? null
39                                        : flexRender(
40                                            header.column.columnDef.header,
41                                            header.getContext()
42                                        )}
43                                </TableHead>
44                            )
45                        })}
46                    </TableRow>
47                ))}
48            </TableHeader>
49            <TableBody>
50                {isLoading ? (
51                    <TableRow className="w-full">
52                        <TableCell colSpan={columns.length} className="h-24 text-center">
53                            <LoaderCircle className="w-5 h-5 animate-spin text-primary" />
54                        </TableCell>
55                    </TableRow>
56                ) : (
57                    table.getRowModel().rows?.length ? (
58                        table.getRowModel().rows.map((row) => (
59                            <TableRow
60                                key={row.id}
61                                data-state={row.getIsSelected() && "selected"}
62                                data-testid={"entity-table-row"}
63                                onClick={() => onRowClick && onRowClick(row.original)}
64                            >
65                                {row.getVisibleCells().map((cell) => (
66                                    <TableCell key={cell.id}>
67                                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
68                                    </TableCell>
69                                ))}
70                            </TableRow>
71                        ))
72                    ) : (
73                        <TableRow>
74                            <TableCell colSpan={columns.length} className="h-24 text-center">
75                                {t('table.no-result')}
76                            </TableCell>
77                        </TableRow>
78                    )
79                )}
80            </TableBody>
81        </Table>
82    )
83}