"use client";

import {
  flexRender,
  getCoreRowModel,
  getFilteredRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import "./style.css";

export default function DataTable(props: any) {
  const [sorting, setSorting] = useState([]);
  const [filtering, setFiltering] = useState("");

  const data = props.data;
  const columns = props.columns;

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    // getPaginationRowModel: getPaginationRowModel(),
    getSortedRowModel: getSortedRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      sorting: sorting,
      globalFilter: filtering,
    },
    onSortingChange: setSorting,
    onGlobalFilterChange: setFiltering,
    columnResizeMode: "onChange",
    debugColumns: true,
  });

  return (
    <div className="relative m-2 min-h-fit overflow-x-auto shadow-md sm:rounded-lg">
      {/* <input
        type="text"
        value={filtering}
        onChange={(e) => setFiltering(e.target.value)}
      /> */}
      <table
        width={table.getCenterTotalSize()}
        className="w-full text-left text-sm text-gray-500 rtl:text-right dark:text-gray-400"
      >
        <thead>
          {table.getHeaderGroups().map((headerGroup) => (
            <tr key={headerGroup.id}>
              {headerGroup.headers.map((header) => (
                <th
                  className={`cursor-pointer border px-6 py-3`}
                  key={header.id}
                  {...{style: {
                    width: header.getSize(),
                    colSpan: header.colSpan,
                  }}}
                  onClick={header.column.getToggleSortingHandler()}
                >
                  {header.isPlaceholder
                    ? null
                    : flexRender(
                        header.column.columnDef.header,
                        header.getContext()
                      )}
                  {
                    { asc: "🔼", desc: "🔽" }[
                      header.column.getIsSorted() ?? null
                    ]
                  }
                  <div
                    {...{
                      onMouseDown: header.getResizeHandler(),
                      className: `resizer ${
                        header.column.getIsResizing() ? "isResizing" : ""
                      }`
                    }}
                  />
                </th>
              ))}
            </tr>
          ))}
        </thead>
        <tbody>
          {table.getRowModel().rows.map((row) => (
            <tr
              key={row.id}
              className="border-b bg-white dark:border-gray-700 dark:bg-gray-800"
            >
              {row.getVisibleCells().map((cell) => (
                <td
                  width={cell.column.getSize()}
                  className={`border px-6 py-3`}
                  key={cell.id}
                >
                  {flexRender(cell.column.columnDef.cell, cell.getContext())}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}