"use client";

import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { Spinner, Table } from "flowbite-react";
import type { FC } from "react";
import { FaArrowDown, FaArrowUp } from "react-icons/fa";
import "./style.css";

type props = {
  data: any;
  columns: any;
  loading?: boolean;
  fixedHeader?: boolean;
  initSorting?: any;
};

const DataTable: FC<props> = ({
  data,
  columns,
  loading = false,
  fixedHeader = false,
  initSorting = {
    id: "name", // Replace with the ID of the column you want to sort
    desc: false, // Set to `true` for descending order, or `false` for ascending
  },
}) => {
  const table = useReactTable({
    data,
    columns,
    initialState: {
      sorting: [initSorting],
    },
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    columnResizeMode: "onChange",
    enableSortingRemoval: false,
  });
  return (
    <>
      {loading && (
        <div className="text-center absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2 z-50">
          <Spinner
            aria-label="Center-aligned spinner"
            className="mt-20"
            size="xl"
          />
        </div>
      )}
      <div
        className={`overflow-auto ${
          fixedHeader ? "h-screen no-scrollbar" : ""
        }`}
      >
        <Table className="min-w-full divide-y divide-gray-200 dark:divide-gray-600 relative no-scrollbar">
          {table.getHeaderGroups().map((headerGroup) => (
            <Table.Head
              className="bg-gray-100 dark:bg-gray-700"
              theme={{
                cell: {
                  base: "p-4 text-left text-xs font-medium uppercase font-bold text-gray-900 dark:text-gray-400",
                },
              }}
              key={headerGroup.id}
            >
              {headerGroup.headers.map((header, index) => (
                <Table.HeadCell
                  className={`cursor-pointer bg-gray-100  ${
                    fixedHeader ? "sticky top-0" : ""
                  }`}
                  key={header.id}
                  {...{
                    colSpan: header.colSpan,
                  }}
                  onClick={
                    index >= 0
                      ? header.column.getToggleSortingHandler()
                      : () => {}
                  }
                >
                  <span className="flex">
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                    {
                      {
                        asc: <FaArrowUp className="ml-1" />,
                        desc: <FaArrowDown className="ml-1" />,
                      }[header?.column?.getIsSorted() ?? null]
                    }
                  </span>
                </Table.HeadCell>
              ))}
            </Table.Head>
          ))}

          <Table.Body className="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-800">
            {table.getRowModel().rows.map((row) => (
              <Table.Row
                className="font-bold text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700 pl-5 "
                key={row.id}
              >
                {row.getVisibleCells().map((cell, index) => (
                  <td
                    className={`w-4 p-2 ${index === 0 ? "pl-4" : ""}`}
                    key={cell.id}
                  >
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </td>
                ))}
              </Table.Row>
            ))}
          </Table.Body>
        </Table>
      </div>
    </>
  );
};
export default DataTable;