"use client"

import * as React from "react"

import { cn } from "@/lib/utils"

export interface SortableListItem {
  id: string
  title: string
  description?: string
  meta?: string
}

interface SortableListRenderState {
  isDragging: boolean
  isOver: boolean
  isActive: boolean
}

interface SortableListProps<T>
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
  items: T[]
  getId?: (item: T) => string
  renderItem?: (item: T, state: SortableListRenderState) => React.ReactNode
  onReorder?: (items: T[]) => void
  onChange?: (items: T[]) => void
}

const moveItem = <T,>(list: T[], activeId: string, overId: string, getId: (item: T) => string) => {
  const fromIndex = list.findIndex((item) => getId(item) === activeId)
  const toIndex = list.findIndex((item) => getId(item) === overId)

  if (fromIndex === -1 || toIndex === -1 || fromIndex === toIndex) {
    return list
  }

  const next = [...list]
  const [moved] = next.splice(fromIndex, 1)
  next.splice(toIndex, 0, moved)
  return next
}

function SortableList<T>({
  items,
  getId,
  renderItem,
  onReorder,
  onChange,
  className,
  ...props
}: SortableListProps<T>) {
  const idResolver = React.useMemo(
    () => getId ?? ((item: T) => (item as SortableListItem).id),
    [getId]
  )
  const [list, setList] = React.useState<T[]>(items)
  const [draggingId, setDraggingId] = React.useState<string | null>(null)
  const [overId, setOverId] = React.useState<string | null>(null)

  React.useEffect(() => {
    setList(items)
  }, [items])

  const draggingIdRef = React.useRef<string | null>(null)

  const commitReorder = (targetId: string) => {
    const activeId = draggingIdRef.current

    if (!activeId || activeId === targetId) {
      return
    }

    setList((prev) => {
      const nextList = moveItem(prev, activeId, targetId, idResolver)
      if (nextList === prev) {
        return prev
      }
      onReorder?.(nextList)
      onChange?.(nextList)
      return nextList
    })
  }

  React.useEffect(() => {
    draggingIdRef.current = draggingId
  }, [draggingId])

  const handleDragStart = (id: string) => (event: React.DragEvent) => {
    setDraggingId(id)
    setOverId(id)
    draggingIdRef.current = id
    event.dataTransfer.effectAllowed = "move"
    event.dataTransfer.setData("text/plain", id)
  }

  const handleDragOver = (id: string) => (event: React.DragEvent) => {
    event.preventDefault()
    if (draggingId && id !== overId) {
      setOverId(id)
    }
  }

  const handleDrop = (id: string) => (event: React.DragEvent) => {
    event.preventDefault()
    commitReorder(id)
    setDraggingId(null)
    setOverId(null)
  }

  const handleDragEnd = () => {
    setDraggingId(null)
    setOverId(null)
  }

  return (
    <div
      className={cn(
        "flex flex-col gap-3 rounded-2xl border border-border bg-card p-4",
        className
      )}
      role="list"
      {...props}
    >
      {list.map((item) => {
        const id = idResolver(item)
        const isDragging = draggingId === id
        const isOver = Boolean(draggingId && overId === id && draggingId !== id)

        return (
          <React.Fragment key={id}>
            {isOver ? (
              <div className="h-12 rounded-xl border border-dashed border-border bg-muted" />
            ) : null}
            <div
              role="listitem"
              draggable
              onDragStart={handleDragStart(id)}
              onDragOver={handleDragOver(id)}
              onDrop={handleDrop(id)}
              onDragEnd={handleDragEnd}
              aria-grabbed={isDragging}
              className={cn(
                "flex items-start justify-between gap-4 rounded-xl border border-border bg-card px-4 py-3 text-sm shadow-sm transition",
                isDragging
                  ? "opacity-60 ring-2 ring-ring/30"
                  : "hover:bg-muted"
              )}
            >
              <div className="flex flex-1 items-start gap-3">
                <SortableHandle />
                <div className="flex-1">
                  {renderItem ? (
                    renderItem(item, {
                      isDragging,
                      isOver,
                      isActive: draggingId === null,
                    })
                  ) : (
                    <DefaultSortableItem item={item as SortableListItem} />
                  )}
                </div>
              </div>
            </div>
          </React.Fragment>
        )
      })}
    </div>
  )
}

function DefaultSortableItem({ item }: { item: SortableListItem }) {
  return (
    <div className="flex items-center justify-between gap-4">
      <div className="space-y-1">
        <p className="font-semibold text-foreground">{item.title}</p>
        {item.description ? (
          <p className="text-xs text-muted-foreground">{item.description}</p>
        ) : null}
      </div>
      {item.meta ? (
        <span className="rounded-full border border-border bg-muted px-2 py-1 text-xs font-semibold text-muted-foreground">
          {item.meta}
        </span>
      ) : null}
    </div>
  )
}

function SortableHandle() {
  return (
    <span
      className="mt-1 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground transition cursor-grab active:cursor-grabbing"
      aria-hidden="true"
    >
      <svg
        viewBox="0 0 24 24"
        className="h-4 w-4"
        fill="currentColor"
        aria-hidden="true"
      >
        <circle cx="8" cy="6" r="1.5" />
        <circle cx="16" cy="6" r="1.5" />
        <circle cx="8" cy="12" r="1.5" />
        <circle cx="16" cy="12" r="1.5" />
        <circle cx="8" cy="18" r="1.5" />
        <circle cx="16" cy="18" r="1.5" />
      </svg>
    </span>
  )
}

export { SortableList, type SortableListProps }
Sortable List

Dependencies

Files

Installation
