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