'use client';
import * as React from "react"
import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
import { Checkbox } from "@/components/ui/checkbox"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { flexRender, getCoreRowModel, useReactTable, ColumnSizingState } from '@tanstack/react-table';
import { ColumnResizer } from "@/components/common/ColumnResizer";



export const ResultTable = React.forwardRef(
  (
    {
      columns,
      data,
      totalItems,
      onDelete,
      disableMultiSelect,
      setDisableMultipleSelect,
      pageSize,
      onExport,
      otherAction,
      setSelectedIds,
      setSideBar,
      getData,
      notesOpened
    }: any,
    ref
  ) => {

    const pageCount = Math.ceil(totalItems / pageSize);
    const [colSizing, setColSizing] = React.useState<ColumnSizingState>({});

    const table = useReactTable({
      data,
      columns,
      pageCount,
      getCoreRowModel: getCoreRowModel(),
      manualPagination: true,
      manualFiltering: true,
      enableRowSelection: true,
      enableColumnResizing: true,
      columnResizeMode: "onChange",
      onColumnSizingChange: setColSizing,
      state: {
        columnSizing: colSizing,
      },
    });


    const handleBulkDelete = () => {
      const selectedRowIds = table.getSelectedRowModel().rows.map((row: any) => row.original._id);
      onDelete(selectedRowIds);
      // table.resetRowSelection();
    };


    const getSelectedRowsId = () => {
      const selectedRowIds = table.getSelectedRowModel().rows.map((row: any) => row.original._id);
      setSelectedIds(selectedRowIds);
    };

    const handleResetRowSelection = () => {
      table.resetRowSelection();
    }
    const handleBulkExport = () => {
      const selectedRowIds = table.getSelectedRowModel().rows.map((row: any) => row.original._id);
      onExport(selectedRowIds);
    };


    React.useImperativeHandle(ref, () => ({
      getSelectedRowsId,
      handleBulkDelete,
      handleResetRowSelection,
      handleBulkExport
    }));






    const handleMultiSelect = (type: string, row: any) => {
      if (type === "ALL") {
        table.toggleAllRowsSelected();
        setTimeout(() => {
          const selectedRowsCount = table.getSelectedRowModel().rows.length;
          setDisableMultipleSelect(selectedRowsCount === 0);
        }, 0);
      } else {
        row.toggleSelected();
        setTimeout(() => {
          const selectedRowsCount = table.getSelectedRowModel().rows.length;
          setDisableMultipleSelect(selectedRowsCount === 0);
        }, 0);
      }
    };

    return (
      <>
        <div className="rounded-md border">
          <ScrollArea className="h-100 rounded-md border border-common md:h-100">
            <Table style={{ width: table.getTotalSize() }}>
              <TableHeader>
                {table.getHeaderGroups().map((headerGroup) => (
                  <TableRow key={headerGroup.id}>
                    <TableHead className="whitespace-normal">
                      {!disableMultiSelect && <Checkbox
                        checked={table.getIsAllRowsSelected()}
                        onCheckedChange={() => handleMultiSelect("ALL", headerGroup)}
                        aria-label="Select row"
                      />}
                    </TableHead>
                    {headerGroup.headers.map((header) => {
                      return (
                        <TableHead
                          key={header.id}
                          className="relative text-wrap"
                          style={{
                            width: header.getSize(),
                          }}
                        >
                          {header.isPlaceholder
                            ? null
                            : flexRender(
                              header.column.columnDef.header,
                              header.getContext()
                            )}
                          <ColumnResizer header={header} />
                        </TableHead>
                      );
                    })}
                  </TableRow>
                ))}
              </TableHeader>
              <TableBody>
                {table.getRowModel().rows?.length ? (
                  table.getRowModel().rows.map((row: any) => (
                    <TableRow
                      key={row.id}
                      data-state={row.getIsSelected() && "selected"}
                      onClick={setSideBar ? () => { setSideBar(!open), getData(row?.original?._id) } : undefined}
                    >
                      <TableCell className="whitespace-normal">
                        {!disableMultiSelect && <Checkbox
                          checked={row.getIsSelected()}
                          onCheckedChange={() => handleMultiSelect("SINGLE", row)}
                          aria-label="Select row"
                          onClick={(e) => {
                            e.stopPropagation();
                          }}
                        />}
                      </TableCell>
                      {row.getVisibleCells().map((cell: any) => (
                        <TableCell
                          key={cell.id}
                          className="whitespace-normal"
                          onClick={(e) => {
                            notesOpened ? e.stopPropagation() : undefined
                          }}
                          style={{
                            width: cell.column.getSize(),
                            minWidth: cell.column.columnDef.minSize,
                          }}
                        >
                          {flexRender(cell.column.columnDef.cell, cell.getContext())}
                        </TableCell>
                      ))}
                    </TableRow>
                  ))
                ) : (
                  <TableRow>
                    <TableCell colSpan={columns.length + 1} className="h-24 text-center">
                      No results.
                    </TableCell>
                  </TableRow>
                )}
              </TableBody>
            </Table>
            <ScrollBar orientation="horizontal" />
          </ScrollArea>
        </div>
      </>
    );
  }
)
ResultTable.displayName = 'ResultTable';