/*
 * Arrastar uma peça do painel (forma, ícone, texto, foto) direto para a arte,
 * soltando no lugar certo. O navegador só carrega texto no arrasto, então a
 * peça a criar fica aqui (uma por vez) e quem recebe o "soltar" pega daqui.
 */
import type { Peca } from "@/lib/banner-editor/documento";

const TIPO = "application/x-ktalogu-peca";
let emArrasto: (() => Peca[]) | null = null;

/** Para o `onDragStart` do item do painel. */
export function comecarArrasto(e: React.DragEvent, criar: () => Peca | Peca[]) {
  emArrasto = () => {
    const feito = criar();
    return Array.isArray(feito) ? feito : [feito];
  };
  e.dataTransfer.setData(TIPO, "1");
  e.dataTransfer.effectAllowed = "copy";
}

/** O arrasto é de uma peça do painel (e não de um arquivo do computador)? */
export function ehPecaDoPainel(e: React.DragEvent) {
  return Array.from(e.dataTransfer.types).includes(TIPO);
}

/** As peças do arrasto (uma vez só: depois de soltar, esvazia). */
export function pegarArrasto(): Peca[] | null {
  const criar = emArrasto;
  emArrasto = null;
  return criar ? criar() : null;
}

/** Os atributos que tornam um botão do painel arrastável. */
export function arrastavel(criar: () => Peca | Peca[]) {
  return {
    draggable: true,
    onDragStart: (e: React.DragEvent) => comecarArrasto(e, criar),
    onDragEnd: () => {
      emArrasto = null;
    },
  };
}