"use client";

import {
  flexRender,
  getCoreRowModel,
  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 [columnResizeMode, setColumnResizeMode] = useState("onChange");

  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",
  });

  return (
    <div className="relative m-2 m-3 min-h-fit overflow-x-auto shadow-md sm:rounded-lg">
      {/* <input
        type="text"
        value={filtering}
        onChange={(e) => setFiltering(e.target.value)}
      /> */}
      <div className="w-full overflow-x-auto text-left text-gray-500 rtl:text-right dark:text-gray-400">
        <div
          {...{
            className: 'w-full',
            style: {
              width: table.getTotalSize(),
            },
          }}
        >
          <div className="thead">
            {table.getHeaderGroups().map(headerGroup => (
              <div
              key={headerGroup.id}
                {...{
                  className: 'flex',
                }}
              >
                {headerGroup.headers.map(header => (
                  <div
                      key={header.id}
                    {...{
                      className: 'border p-2 relative ',
                      style: {
                        width: (header.getSize()),
                      },
                    }}
                  >
                    {header.isPlaceholder
                      ? null
                      : flexRender(
                          header.column.columnDef.header,
                          header.getContext()
                        )}
                    <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',
            }}
          >
            {table.getRowModel().rows.map(row => (
              <div
              key={row.id}
                {...{
                  className: 'flex',
                  style: {
                    position: 'relative',
                  },
                }}
              >
                {row.getVisibleCells().map(cell => (
                  <div
                   key={cell.id}
                    {...{
                      className: 'border px-3 py-3',
                      style: {
                        width: (cell.column.getSize()),
                      },
                    }}
                  >
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}