xiaoxia-saas/apps/web/src/components/asset-selector/hooks/useDragReorder.ts

import { useState, useCallback } from "react"
import type { MediaAsset } from "@/api/template-editor"

interface UseDragReorderOptions {
  filteredAssets: MediaAsset[]
  selectedIds: string[]
  onAssetDragStart?: (asset: MediaAsset) => void
  onReorder?: (fromIdx: number, toIdx: number) => void
}

interface UseDragReorderReturn {
  dragIdx: number | null
  dragOverIdx: number | null
  handleDragStart: (e: React.DragEvent, idx: number) => void
  handleDragOver: (e: React.DragEvent, idx: number) => void
  handleDrop: (e: React.DragEvent, toIdx: number) => void
  handleDragEnd: () => void
}

/**
 * 拖拽排序 Hook —— HTML5 DnD，支持批量拖拽携带数据
 */
const useDragReorder = ({
  filteredAssets,
  selectedIds,
  onAssetDragStart,
  onReorder,
}: UseDragReorderOptions): UseDragReorderReturn => {
  const [dragIdx, setDragIdx] = useState<number | null>(null)
  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null)

  const handleDragStart = useCallback(
    (e: React.DragEvent, idx: number) => {
      setDragIdx(idx)
      e.dataTransfer.effectAllowed = "move"
      e.dataTransfer.setData("text/plain", String(idx))
      // 设置素材数据，供 TimelinePanel 接收
      e.dataTransfer.setData("application/x-media-asset", JSON.stringify(filteredAssets[idx]))
      // 批量拖拽：如果有多个选中素材，一起携带
      if (selectedIds.length > 1 && selectedIds.includes(filteredAssets[idx].id)) {
        const batchAssets = filteredAssets.filter((a) => selectedIds.includes(a.id))
        e.dataTransfer.setData("application/x-media-assets", JSON.stringify(batchAssets))
      }
      // 通知父组件素材拖拽开始
      if (onAssetDragStart) {
        onAssetDragStart(filteredAssets[idx])
      }
    },
    [filteredAssets, selectedIds, onAssetDragStart],
  )

  const handleDragOver = useCallback(
    (e: React.DragEvent, idx: number) => {
      e.preventDefault()
      e.dataTransfer.dropEffect = "move"
      if (dragIdx === null || dragIdx === idx) return
      setDragOverIdx(idx)
    },
    [dragIdx],
  )

  const handleDrop = useCallback(
    (e: React.DragEvent, toIdx: number) => {
      e.preventDefault()
      if (dragIdx !== null && dragIdx !== toIdx && onReorder) {
        onReorder(dragIdx, toIdx)
      }
      setDragIdx(null)
      setDragOverIdx(null)
    },
    [dragIdx, onReorder],
  )

  const handleDragEnd = useCallback(() => {
    setDragIdx(null)
    setDragOverIdx(null)
  }, [])

  return {
    dragIdx,
    dragOverIdx,
    handleDragStart,
    handleDragOver,
    handleDrop,
    handleDragEnd,
  }
}

export default useDragReorder