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

const getId = (type) => {
  return `${type}_${uuidv4().replaceAll('-', '_')}`;
};

const getOption = (e) => {
  if (e === 'circuitComponent') {
    return {
      network: '',
      id: '',
      value: ''
    };
  } else {
    return {};
  }
};

const getStyle = (e) => {
  if (e === 'circuitComponent') {
    return {};
  } else if (e === 'line') {
    return {
      width: 1,
      lineType: 0,
      rotate: 0,
      transformOrigin1: 'center',
      transformOrigin2: 'center',
      color: '#000'
    };
  } else if (e === 'text1') {
    return {
      align: 'center',
      whiteSpace: 'nowrap',
      color: '#000'
    };
  } else if (e === 'deviceDataList') {
    return {
      ratio: 50,
      align: 'center',
      whiteSpace: 'nowrap',
      isColonCentered: false,
      fontSize: 12,
      color1: '#000',
      color2: '#000'
    };
  } else {
    return {};
  }
};
const getNodeSize = (e) => {
  if (e === 'circuitComponent') {
    return { width: 50, height: 50 };
  } else if (e === 'line') {
    return { width: 100, height: 20 };
  } else if (e === 'deviceDataList') {
    return { width: 100, height: 20 };
  } else if (e === 'text1') {
    return { width: 100, height: 20 };
  } else {
    return { width: 100, height: 20 };
  }
};
const nameEnum = {};
const tool = () => {
  const nodeType = ref('');
  const customData = ref({ type: 1 });
  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow({ id: 'flowA' });
  const onDragStart = (event, type, data) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type);
      event.dataTransfer.effectAllowed = 'move';
    }

    nodeType.value = type;
    customData.value = data || { type: 1 };
    document.addEventListener('drop', onDragEnd);
  };
  const onDragEnd = () => {
    nodeType.value = null;
    document.removeEventListener('drop', onDragEnd);
  };
  const onDrop = (event) => {
    const dimensions = getNodeSize(nodeType.value);

    const position = screenToFlowCoordinate({
      x: event.clientX,
      y: event.clientY
    });

    const nodeId = getId(nodeType.value);
    const newNode = {
      id: nodeId,
      name: nameEnum[nodeType.value],
      draggable: true,
      type: nodeType.value,
      dimensions,
      position,
      data: { options: getOption(nodeType.value), style: getStyle(nodeType.value), customData: customData.value }
    };

    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);
    if (nodeType.value === 'circuitComponent') {
      const childrenNodeId = getId('deviceDataList');
      const childrenNode = {
        id: childrenNodeId,
        parentNode: nodeId,
        name: nameEnum['deviceDataList'],
        draggable: true,
        type: 'deviceDataList',
        dimensions: getNodeSize('deviceDataList'),
        position: { x: newNode.dimensions.width, y: 0 },
        data: { options: getOption('deviceDataList'), style: getStyle('deviceDataList') }
      };
      const { off } = onNodesInitialized(() => {
        updateNode(childrenNodeId, (node) => ({
          position: { x: node.position.x - node.dimensions.width / 2, y: node.position.y - node.dimensions.height / 2 }
        }));

        off();
      });

      addNodes(childrenNode);
    }
  };
  const onDragOver = (event) => {
    event.preventDefault();

    if (nodeType.value) {
      if (event.dataTransfer) {
        event.dataTransfer.dropEffect = 'move';
      }
    }
  };
  return {
    onDragStart,
    onDragEnd,
    onDrop,
    onDragOver
  };
};
export default tool;
