import {
  SortableContext,
  verticalListSortingStrategy,
} from '@dnd-kit/sortable'
import {
  useSensor,
  useSensors,
  PointerSensor,
  closestCenter,
  DndContext,
  type DragEndEvent,
} from '@dnd-kit/core'
import { useTreeStore } from '../../store/store'
import type { KeyNote } from '../../types'
import { KeyNoteCard } from './KeyNoteCard'

interface Props {
  subThemeId: string
  notes: KeyNote[]
}

export function KeyNotesDropZone({ subThemeId, notes }: Props) {
  const reorderKeyNotes = useTreeStore((s) => s.reorderKeyNotes)
  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }))

  function onDragEnd(e: DragEndEvent) {
    const { active, over } = e
    if (!over || active.id === over.id) return
    const ids = notes.map((n) => n.id)
    const from = ids.indexOf(String(active.id))
    const to = ids.indexOf(String(over.id))
    if (from === -1 || to === -1) return
    const next = [...ids]
    const [moved] = next.splice(from, 1)
    next.splice(to, 0, moved)
    reorderKeyNotes(subThemeId, next)
  }

  return (
    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
      <SortableContext items={notes.map((n) => n.id)} strategy={verticalListSortingStrategy}>
        <div className="flex flex-col gap-3">
          {notes.map((n) => (
            <KeyNoteCard key={n.id} subThemeId={subThemeId} note={n} />
          ))}
        </div>
      </SortableContext>
    </DndContext>
  )
}