import { useState } from "react";
import SingleForm from "../molecules/SingleForm";
import { Plus } from "../../assets/icons/Plus";
import { Label } from "../ui/label";
import {
  SortableContext,
  sortableKeyboardCoordinates,
  verticalListSortingStrategy,
  arrayMove,
} from "@dnd-kit/sortable";
import {
  DndContext,
  KeyboardSensor,
  PointerSensor,
  useSensor,
  useSensors,
  DragOverlay,
  closestCenter,
} from "@dnd-kit/core";

const ShipmentForm = () => {
  const [forms, setForms] = useState<string[]>(["1"]);
  const [activeId, setActiveId] = useState(null);

  const sensors = useSensors(
    useSensor(PointerSensor),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );

  const addForm = () =>
    setForms((prev) => [...prev, (prev.length + 1).toString()]);

  const onRemoveForm = (id: string) =>
    setForms((prev) => prev.filter((item) => item !== id));

  function handleDragStart(event: any) {
    const { active } = event;

    setActiveId(active.id);
  }

  function handleDragEnd(event: any) {
    const { active, over } = event;

    if (active.id !== over.id) {
      setForms((items) => {
        const oldIndex = items.indexOf(active.id);
        const newIndex = items.indexOf(over.id);

        return arrayMove(items, oldIndex, newIndex);
      });
    }

    setActiveId(null);
  }

  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragStart={handleDragStart}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={forms} strategy={verticalListSortingStrategy}>
        <div className="overflow-y-scroll h-full pb-[100px]">
          {forms.map((item, index) => (
            <SingleForm
              key={item}
              id={item}
              hasArrow={index !== 0}
              onRemove={onRemoveForm}
              removeEnabled={forms.length > 1}
            />
          ))}

          <div className="flex flex-row items-center mt-4" onClick={addForm}>
            <Plus />
            <Label style={{ color: "#06B9FC", marginLeft: 8 }}>
              Додај нови претовар
            </Label>
          </div>
        </div>
      </SortableContext>
      {/* <DragOverlay>
        {activeId ? <SingleForm id={activeId} /> : null}
      </DragOverlay> */}
    </DndContext>
  );
};

export default ShipmentForm;