"use client";
import {
    ColumnDef,
    flexRender,
    getCoreRowModel,
    useReactTable,
    getPaginationRowModel,
    SortingState,
    ColumnFiltersState,
    getFilteredRowModel,
  } from "@tanstack/react-table"
import { useState } from "react";

  interface DataTableProps<TData, TValue> {
    columns: ColumnDef<TData, TValue>[]
    data: TData[]
  }

export default function Table<TData, TValue>({
    columns,
    data,
  }: DataTableProps<TData, TValue>) {
    const [rowSelection, setRowSelection] = useState({})
    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
        []
      )

    const table = useReactTable({
        data,
        columns,
        getCoreRowModel: getCoreRowModel(),
        getPaginationRowModel: getPaginationRowModel(),
    
        state: {
          rowSelection,
          columnFilters,
        },
        getFilteredRowModel: getFilteredRowModel(),
        onRowSelectionChange: setRowSelection,
        onColumnFiltersChange: setColumnFilters,
      })


    function clsx(arg0: string, arg1: { 'bg-gray-300': boolean; }): string | undefined {
        throw new Error("Function not implemented.");
    }

    return(
        <div>
            <div className="rounded-md border">
                <table>
                    <thead>
                        {table.getHeaderGroups().map((headerGroup) => (
                            <tr key={headerGroup.id}>
                                {headerGroup.headers.map((header) => {
                                    return(
                                        <th key={header.id}>
                                            {flexRender(
                                                header.column.columnDef.header,
                                                header.getContext()
                                            )}
                                        </th>
                                    )
                                })}
                            </tr>
                        ))}
                    </thead>
                    <tbody>
                        {table.getRowModel().rows.length ? (
                            table.getRowModel().rows.map((row) => (
                                <tr key={row.id} className={clsx('hover:bg-gray-300', { 'bg-gray-300': row.getIsSelected()})}>
                                    {row.getVisibleCells().map((cell) => (
                                        <td key={cell.id}>
                                            {flexRender(cell.column.columnDef.cell, cell.getContext())}
                                        </td>
                                    ))}
                                </tr>
                            ))
                        )
                        : (
                            <tr>
                                <td>
                                    Aucun résultats
                                </td>
                            </tr>
                        )}
                    </tbody>
                </table>
            </div>

            <div className="flex items-center justify-end space-x-2 py-4">
            <button
                className="border bg-gray-200 shadow-xs hover:bg-gray-300 hover:text-black"
                onClick={() => table.previousPage()}
                disabled={!table.getCanPreviousPage()}
            >
                Précédent
            </button>
            <button
                onClick={() => table.nextPage()}
                disabled={!table.getCanNextPage()}
            >
                Suivant
            </button>
        </div>
        </div>
    )
}