import {
  closestCenter,
  DndContext,
  DragEndEvent,
  KeyboardSensor,
  MouseSensor,
  SensorDescriptor,
  SensorOptions,
  TouchSensor,
  useSensor,
  useSensors,
} from "@dnd-kit/core";
import { CraftTableComponentProps } from "../types/table";
import Table from "./table";
import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
import { arrayMove } from "@dnd-kit/sortable";

function TableDND<T>({
  table,
  featureOptions,
  NestedComponent,
  columnOrder,
  setColumnOrder,
  isCompactTable,
  tableStates,
}: CraftTableComponentProps<T>) {
  const sensors: SensorDescriptor<SensorOptions>[] = useSensors(
    useSensor(MouseSensor, {}),
    useSensor(TouchSensor, {}),
    useSensor(KeyboardSensor, {})
  );

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (active && over && active.id !== over.id) {
      setColumnOrder((columnOrder) => {
        const oldIndex = columnOrder.indexOf(active.id as string);
        const newIndex = columnOrder.indexOf(over.id as string);
        return arrayMove(columnOrder, oldIndex, newIndex);
      });
    }
  };

  return (
    <DndContext
      collisionDetection={closestCenter}
      modifiers={[restrictToHorizontalAxis]}
      onDragEnd={handleDragEnd}
      sensors={sensors}
    >
      <Table
        table={table}
        featureOptions={featureOptions}
        NestedComponent={NestedComponent}
        columnOrder={columnOrder}
        setColumnOrder={setColumnOrder}
        isCompactTable={isCompactTable}
        tableStates={tableStates}
      />
    </DndContext>
  );
}

export default TableDND;