import { Ref, toRaw, unref } from 'vue';
import type { VueFlowStore } from '@vue-flow/core';
import type { FlowElRef } from '../types/flow';
import type { CreateNodeModal } from '../src/components/CreateNodeModal';
import type { DragTransferData } from '../types/node';
import { useAddNodes } from './useAddNodes';

type EffectSymbol = DataTransfer['dropEffect'];

export const TRANSFER_DATA_KEY = 'NODE_INFO';
export const EFFECT_SYMBOL: EffectSymbol = 'move';

interface UseDragCreateOptionsType {
  el: Ref<Nullable<FlowElRef>>;
  createNodeModalActionType: Ref<Nullable<InstanceType<typeof CreateNodeModal>>>;
  flowActionType: VueFlowStore;
  triggerChange: () => void;
}

export function useDragCreate(options: UseDragCreateOptionsType) {
  const { el, createNodeModalActionType, flowActionType, triggerChange } = options;
  const { project, addNodes } = flowActionType;
  const { getAddNodesParams } = useAddNodes();

  const handleOnDrop = async (event: DragEvent) => {
    const value = event.dataTransfer?.getData(TRANSFER_DATA_KEY);
    const transferData: DragTransferData = JSON.parse(value || '');
    const { options: nodeData, offsetX, offsetY } = transferData;
    const { flag, data } = (await unref(createNodeModalActionType)?.open(nodeData)) || {};
    if (!flag) return;

    const flowBounds = unref(el)?.$el.getBoundingClientRect() as DOMRect;

    const position = project({
      x: event.clientX - flowBounds.left - offsetX,
      y: event.clientY - flowBounds.top - offsetY,
    });

    const newNode = getAddNodesParams(position, { ...toRaw(unref(nodeData)), data });
    addNodes(newNode);

    triggerChange();
  };

  const handleOnDragOver = (event: DragEvent) => {
    event.preventDefault();

    if (event.dataTransfer) event.dataTransfer.dropEffect = EFFECT_SYMBOL;
  };

  const handleOnDragStart = (event: DragEvent, options: object) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData(TRANSFER_DATA_KEY, JSON.stringify(options));
      event.dataTransfer.effectAllowed = EFFECT_SYMBOL;
    }
  };

  return {
    handleOnDrop,
    handleOnDragOver,
    handleOnDragStart,
  };
}