import { useVueFlow } from '@vue-flow/core';
import { ref, watch } from 'vue';
import { v4 as uuidv4 } from 'uuid';

const nodeType = ref('');
const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();

const getId = (type) => {
  return `${type}_${uuidv4().replaceAll('-', '_')}`;
};
const onDragStart = (event, type) => {
  if (event.dataTransfer) {
    event.dataTransfer.setData('application/vueflow', type);
    event.dataTransfer.effectAllowed = 'move';
  }

  nodeType.value = type;
  document.addEventListener('drop', onDragEnd);
};
const onDragEnd = () => {
  nodeType.value = null;
  document.removeEventListener('drop', onDragEnd);
};


const getOption = (e) => {
  return {
    deviceType: e, deviceName: ''
  };
};


const onDragOver = (event) => {
  event.preventDefault();

  if (nodeType.value) {

    if (event.dataTransfer) {
      event.dataTransfer.dropEffect = 'move';
    }
  }
};

const onDrop = (event) => {
  console.log('onDrop', event);
  const position = screenToFlowCoordinate({
    x: event.clientX, y: event.clientY
  });

  const nodeId = getId(nodeType.value);
  const newNode = {
    id: nodeId, name: nodeType.value, type: nodeType.value, dimensions: {
      width: 100, height: 60
    }, position, data: { label: nodeId, options: getOption(nodeType.value), deviceData: {} }
  };


  const { off } = onNodesInitialized(() => {
    updateNode(nodeId, (node) => ({
      position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
    }));

    off();
  });

  addNodes(newNode);

};

export {
  onDragStart, onDragEnd, onDrop, onDragOver
};