import {
  DataTablaRowActionFunction,
  DataTableRowActions,
  DataTableRowDragHandleCell,
} from "@/components";
import { Checkbox } from "@/ui";
import { ColumnDef, Row, Table } from "@tanstack/react-table";
import { MoreHorizontalIcon, UnfoldVertical } from "lucide-react";

import { useMemo } from "react";

/*function getSelectedRowRange<T>(
  rows: Row<T>[],
  currentID: number,
  selectedID: number,
): Row<T>[] {
  const rangeStart = selectedID > currentID ? currentID : selectedID;
  const rangeEnd = rangeStart === currentID ? selectedID : currentID;
  return rows.slice(rangeStart, rangeEnd + 1);
}*/

export function useDetailColumns<TData, TValue>(
  columns: ColumnDef<TData>[],
  options: {
    enableDragHandleColumn?: boolean;
    enableSelectionColumn?: boolean;
    enableActionsColumn?: boolean;
    rowActionFn?: DataTablaRowActionFunction<TData, TValue>;
  } = {}
): ColumnDef<TData>[] {
  const {
    enableDragHandleColumn = false,
    enableSelectionColumn = false,
    enableActionsColumn = false,
    rowActionFn = undefined,
  } = options;

  // const lastSelectedId = "";

  return useMemo(() => {
    if (enableSelectionColumn) {
      columns.unshift({
        id: "select",
        header: ({ table }) => (
          <Checkbox
            id='select-all'
            checked={
              table.getIsAllPageRowsSelected() ||
              (table.getIsSomePageRowsSelected() && "indeterminate")
            }
            onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
            aria-label='Seleccionar todo'
            className='translate-y-[2px]'
          />
        ),
        // eslint-disable-next-line @typescript-eslint/no-unused-vars
        cell: ({ row, table }: { row: Row<TData>; table: Table<TData> }) => (
          <Checkbox
            id={`select-row-${row.id}`}
            checked={row.getIsSelected()}
            disabled={!row.getCanSelect()}
            onCheckedChange={row.getToggleSelectedHandler()}
            aria-label='Seleccionar fila'
            className='translate-y-[2px]'
            /*onClick={(e) => {
              if (e.shiftKey) {
                const { rows, rowsById } = table.getRowModel();
                const rowsToToggle = getSelectedRowRange(
                  rows,
                  Number(row.id),
                  Number(lastSelectedId),
                );
                const isCellSelected = rowsById[row.id].getIsSelected();
                rowsToToggle.forEach((_row) =>
                  _row.toggleSelected(!isCellSelected),
                );
              } else {
                row.toggleSelected();
              }

              lastSelectedId = row.id;
            }}*/
          />
        ),
        enableSorting: false,
        enableHiding: false,
        size: 30,
      });
    }

    if (enableDragHandleColumn) {
      columns.unshift({
        id: "row_drag_handle",
        header: () => (
          <UnfoldVertical aria-label='Mover fila' className='items-center justify-center w-4 h-4' />
        ),
        cell: ({ row }: { row: Row<TData> }) => <DataTableRowDragHandleCell rowId={row.id} />,
        size: 16,
        enableSorting: false,
        enableHiding: false,
      });
    }

    if (enableActionsColumn) {
      columns.push({
        id: "row_actions",
        header: () => (
          <MoreHorizontalIcon
            aria-label='Acciones'
            className='items-center justify-center w-4 h-4'
          />
        ),
        cell: (props) => {
          return <DataTableRowActions {...props} actions={rowActionFn} />;
        },
        size: 16,
        enableSorting: false,
        enableHiding: false,
      });
    }

    return columns;
  }, []);
}