"use client";
import {
  flexRender,
  getCoreRowModel,
  getSortedRowModel,
  useReactTable,
} from "@tanstack/react-table";
import { useState } from "react";
import { CgArrowsExchangeAltV } from "react-icons/cg";
import { FaArrowDown, FaArrowUp } from "react-icons/fa";
import "./style.css";

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

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

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    columnResizeMode: "onChange",
  });
  return (
    <div className="relative  min-h-fit overflow-x-auto  sm:rounded-lg">
      <div className="w-full overflow-x-auto text-left text-gray-500 rtl:text-right dark:text-gray-400">
        <div
          {...{
            className: "w-full bg-white",
            style: {
              width: table.getTotalSize(),
            },
          }}
        >
          <div className="thead div-table-heading bg-gray-100">
            {table.getHeaderGroups().map((headerGroup) => (
              <div
                key={headerGroup.id}
                {...{
                  className: "flex",
                }}
              >
                {headerGroup.headers.map((header, index) => (
                  <div
                    key={header.id}
                    {...{
                      className: ` p-4 relative ${
                        index > 0 && index + 1 < headerGroup?.headers?.length
                          ? "cursor-pointer"
                          : ""
                      } ${
                        props?.table === true ? "border-r" : ""
                      } flex font-bold text-xs text-gray-900 bg-grey-50 uppercase`,
                      style: {
                        width: header.getSize(),
                      },
                    }}
                    onClick={
                      index > 0
                        ? header.column.getToggleSortingHandler()
                        : () => {}
                    }
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                    {
                      { asc: <FaArrowUp />, desc: <FaArrowDown /> }[
                        header?.column?.getIsSorted() ?? null
                      ]
                    }
                    <span className="-m-1 ml-3 text-center text-xl">
                      {index > 0 &&
                        index + 1 < headerGroup?.headers?.length && (
                          <CgArrowsExchangeAltV />
                        )}
                    </span>
                    <div
                      {...{
                        onMouseDown: header.getResizeHandler(),
                        onTouchStart: header.getResizeHandler(),
                        className: `resizer ${
                          header.column.getIsResizing() ? "isResizing" : ""
                        }`,
                        style: {
                          transform:
                            columnResizeMode === "onEnd" &&
                            header.column.getIsResizing()
                              ? `translateX(${
                                  table.getState().columnSizingInfo.deltaOffset
                                }px)`
                              : "",
                        },
                      }}
                    />
                  </div>
                ))}
              </div>
            ))}
          </div>
          <div
            {...{
              className: "main-content bg-white",
            }}
          >
            {table.getRowModel().rows.map((row) => (
              <div
                key={row.id}
                {...{
                  className: "flex bg-white hover:bg-gray-100",
                  style: {
                    position: "relative",
                  },
                }}
              >
                {row.getVisibleCells().map((cell) => (
                  <div
                    key={cell.id}
                    {...{
                      className: `border-t ${
                        props?.table === true ? "border-r" : ""
                      } px-3 p-2 font-medium  inline-block align-middle text-gray-900`,
                      style: {
                        width: cell.column.getSize(),
                      },
                    }}
                  >
                    <span className="align-text-middle mt-2 block">
                      {flexRender(
                        cell.column.columnDef.cell,
                        cell.getContext()
                      )}
                    </span>
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}