popiart-website-new/src/hooks/useImageDragTransfer.ts

import { useCallback, useEffect, useMemo } from "react";
import type { DragEvent } from "react";
import { createImageDragTransferManager, type CreateImageDragTransferManagerOptions, type ImageDragTransferManager } from "@/utils/imageDragTransfer";

export type ImageDragStartOptions = {
  previewUrl?: unknown;
  preferDomDragImage?: boolean;
};

export type ImageDragTransferHandle = {
  startDrag: (evt: DragEvent<HTMLElement>, dragUrl: unknown, options?: ImageDragStartOptions) => boolean;
  warmupPreviewUrls: (urls: unknown[]) => void;
  ensurePreviewImage: ImageDragTransferManager["ensurePreviewImage"];
  getDragProps: (
    dragUrl: unknown,
    options?: ImageDragStartOptions,
  ) => {
    draggable: true;
    onDragStart: (evt: DragEvent<HTMLElement>) => boolean;
  };
};

/** 创建并管理图片拖拽传输器：自动 dispose，提供 startDrag / getDragProps 等。 */
export function useImageDragTransfer(options?: CreateImageDragTransferManagerOptions): ImageDragTransferHandle {
  const manager = useMemo(() => createImageDragTransferManager(options), []);

  useEffect(() => () => manager.dispose(), [manager]);

  const startDrag = useCallback(
    (evt: DragEvent<HTMLElement>, dragUrl: unknown, dragOptions?: ImageDragStartOptions) =>
      manager.startImageDrag({
        evt,
        dragUrl,
        previewUrl: dragOptions?.previewUrl ?? dragUrl,
        preferDomDragImage: dragOptions?.preferDomDragImage,
      }),
    [manager],
  );

  const warmupPreviewUrls = useCallback(
    (urls: unknown[]) => {
      manager.warmupPreviewImages(urls);
    },
    [manager],
  );

  const ensurePreviewImage = useCallback((rawUrl?: unknown) => manager.ensurePreviewImage(rawUrl), [manager]);

  const getDragProps = useCallback(
    (dragUrl: unknown, dragOptions?: ImageDragStartOptions) => ({
      draggable: true as const,
      onDragStart: (evt: DragEvent<HTMLElement>) => startDrag(evt, dragUrl, dragOptions),
    }),
    [startDrag],
  );

  return { startDrag, warmupPreviewUrls, ensurePreviewImage, getDragProps };
}

/** 列表变化时预热拖拽预览图。 */
export function useWarmupImageDragUrls(warmupPreviewUrls: (urls: unknown[]) => void, urls: unknown[]) {
  useEffect(() => {
    warmupPreviewUrls(urls);
  }, [warmupPreviewUrls, urls]);
}