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


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

const cmToPx = (cm) => {
  return cm * 96 / 2.54;
};


const getOption = (e, name) => {
  let commonOption = { field: name || '' };
  if (e === 'text') {
    return {
      ...commonOption, horizontalAlign: 'center',
      default: '',
      fontSize: 14,
      border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'right', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }, { type: 'bottom', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'left', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }]
    };
  } else if (e === 'image') {
    return { ...commonOption, imageSrc: '', imageType: '' };
  } else if (e === 'barCode') {
    return { ...commonOption, default: '' };
  } else if (e === 'QRCode') {
    return { ...commonOption, default: '' };
  } else if (e === 'dateTime') {
    return {
      ...commonOption,
      dateTimeType: '',
      border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'right', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }, { type: 'bottom', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'left', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }]
    };
  } else if (e === 'select') {
    return {
      ...commonOption, dic: '',
      default: '',
      JScript: '',
      selectField:'',
      selectOptions: [],
      horizontalAlign: 'center',
      verticalAlign: 'center',
      border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'right', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }, { type: 'bottom', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'left', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }]
    };
  } else if (e === 'inputNode') {
    return {
      default: '',
      horizontalAlign: 'center',
      verticalAlign: 'center',
      border: [{ type: 'top', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'right', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }, { type: 'bottom', isShow: false, width: 1, color: '#000', borderType: 'solid' }, {
        type: 'left', isShow: false, width: 1, color: '#000', borderType: 'solid'
      }]
    };
  } else {
    return {};
  }
};
const getNodeSize = (e) => {
  if (e === 'text') {
    return { width: cmToPx(5), height: cmToPx(2) };
  } else if (e === 'image') {
    return { width: cmToPx(5), height: cmToPx(5) };
  } else if (e === 'barCode') {
    return { width: cmToPx(5), height: cmToPx(2) };
  } else if (e === 'QRCode') {
    return { width: cmToPx(5), height: cmToPx(5) };
  } else if (e === 'dateTime') {
    return { width: cmToPx(8), height: cmToPx(1) };
  } else if (e === 'select') {
    return { width: cmToPx(4), height: cmToPx(1) };
  } else if (e === 'inputNode') {
    return { width: cmToPx(4), height: cmToPx(1) };
  } else {
    return { width: cmToPx(5), height: cmToPx(2) };
  }
};

const tool = () => {
  const nodeType = ref('');
  const parentId = ref('');
  const defaultName = ref('');
  const { addNodes, screenToFlowCoordinate, onNodesInitialized, updateNode } = useVueFlow();
  const onDragStart = (event, type, pid, options) => {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/vueflow', type);
      event.dataTransfer.effectAllowed = 'move';
    }

    nodeType.value = type;
    parentId.value = pid;
    defaultName.value = options?.name;
    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: nodeType.value,
      type: nodeType.value,
      parentNode: parentId.value,
      extent: 'parent',
      dimensions,
      position,
      data: { options: getOption(nodeType.value, defaultName.value), outputData: {} }
    };


    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);

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

    if (nodeType.value) {

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

export const options = {
  isD: false, isJSON: (str) => {
    if (typeof str === 'string') {
      try {
        JSON.parse(str);
        return true;
      } catch (e) {
        return false;
      }
    }
    return false;
  }, cmToPx: cmToPx
};
