1import {
  2    ColumnDef,
  3    ColumnFiltersState,
  4    OnChangeFn,
  5    RowSelectionState,
  6    SortingState,
  7    VisibilityState,
  8    flexRender,
  9    getCoreRowModel,
 10    getFilteredRowModel,
 11    getPaginationRowModel,
 12    getSortedRowModel,
 13    useReactTable,
 14} from "@tanstack/react-table"
 15
 16import {
 17    Button,
 18    Input,
 19    Table,
 20    TableBody,
 21    TableCell,
 22    TableHead,
 23    TableHeader,
 24    TableRow,
 25} from "@marzneshin/components"
 26
 27import { useTranslation } from "react-i18next"
 28import { DataTablePagination } from "./table-pagination"
 29import { useState } from "react"
 30import { DataTableViewOptions } from "./table-view-option"
 31
 32interface DataTableProps<TData, TValue> {
 33    columns: ColumnDef<TData, TValue>[]
 34    data: TData[]
 35    filteredColumn: string
 36    onCreate?: () => void
 37    onOpen?: (object: TData) => void
 38    setSelectedRow?: OnChangeFn<RowSelectionState> | undefined
 39    selectedRow?: RowSelectionState | undefined
 40}
 41
 42export function DataTable<TData, TValue>({
 43    columns,
 44    data,
 45    onCreate,
 46    onOpen,
 47    filteredColumn,
 48    selectedRow,
 49    setSelectedRow,
 50}: DataTableProps<TData, TValue>) {
 51    const [sorting, setSorting] = useState<SortingState>([])
 52    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
 53        []
 54    )
 55    const [columnVisibility, setColumnVisibility] =
 56        useState<VisibilityState>({})
 57    const table = useReactTable({
 58        data,
 59        columns,
 60        onSortingChange: setSorting,
 61        onColumnFiltersChange: setColumnFilters,
 62        getCoreRowModel: getCoreRowModel(),
 63        getPaginationRowModel: getPaginationRowModel(),
 64        getSortedRowModel: getSortedRowModel(),
 65        getFilteredRowModel: getFilteredRowModel(),
 66        onColumnVisibilityChange: setColumnVisibility,
 67        onRowSelectionChange: setSelectedRow,
 68        state: {
 69            sorting,
 70            columnFilters,
 71            columnVisibility,
 72            rowSelection: selectedRow !== undefined ? selectedRow : {},
 73        },
 74    })
 75    const { t } = useTranslation();
 76    return (
 77        <div>
 78            <div className="flex items-center py-4">
 79                <Input
 80                    placeholder={t('table.filter-placeholder', { name: filteredColumn })}
 81                    value={(table.getColumn(filteredColumn)?.getFilterValue() as string) ?? ""}
 82                    onChange={(event) =>
 83                        table.getColumn(filteredColumn)?.setFilterValue(event.target.value)
 84                    }
 85                    className="max-w-sm"
 86                />
 87                <DataTableViewOptions table={table} />
 88                {onCreate && (<Button onClick={onCreate}>{t('create')}</Button>)}
 89            </div>
 90            <div className="rounded-md border">
 91                <Table>
 92                    <TableHeader>
 93                        {table.getHeaderGroups().map((headerGroup) => (
 94                            <TableRow key={headerGroup.id}>
 95                                {headerGroup.headers.map((header) => {
 96                                    return (
 97                                        <TableHead key={header.id}>
 98                                            {header.isPlaceholder
 99                                                ? null
100                                                : flexRender(
101                                                    header.column.columnDef.header,
102                                                    header.getContext()
103                                                )}
104                                        </TableHead>
105                                    )
106                                })}
107                            </TableRow>
108                        ))}
109                    </TableHeader>
110                    <TableBody>
111                        {table.getRowModel().rows?.length ? (
112                            table.getRowModel().rows.map((row) => (
113                                <TableRow
114                                    key={row.id}
115                                    data-state={row.getIsSelected() && "selected"}
116                                    onClick={() => onOpen !== undefined && onOpen(row.original)}
117                                >
118                                    {row.getVisibleCells().map((cell) => (
119                                        <TableCell key={cell.id}>
120                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
121                                        </TableCell>
122                                    ))}
123                                </TableRow>
124                            ))
125                        ) : (
126                            <TableRow>
127                                <TableCell colSpan={columns.length} className="h-24 text-center">
128                                    {t('table.no-result')}
129                                </TableCell>
130                            </TableRow>
131                        )}
132                    </TableBody>
133                </Table>
134                <DataTablePagination table={table} />
135            </div>
136        </div>
137    )
138}