import cytoscape from 'cytoscape';
import dagre from 'cytoscape-dagre';
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

cytoscape.use( dagre );

/**
 * draw processmap for trace
 * @param {array}  nodes array of an object, it contains
 * data:{
 *  backgroundColor: string
 *  bordercolor: string
 *  height: number
 *  id: number
 *  label: string
 *  shape: string
 *  width: number
 * }
 * @param {array}  edges it's similar to nodes
 * @param {string} graphId
 */
export default function cytoscapeMapTrace(nodes, edges, graphId) {
  // create Cytoscape
  let cy = cytoscape({
    container: graphId,
    elements: {
      nodes: nodes, // 節點的資料
      edges: edges, // 關係線的資料
    },
    layout: {
      name: 'dagre',
      rankDir: 'LR' // 直向 TB | 橫向 LR, 'cytoscape-dagre' 套件裡的變數
    },
    style: [
      // node 節點的樣式
      {
        selector: 'node',
        style: {
          'label':
          function(node) { // 節點要顯示的文字
            let text = '';

            // node.data('label') 為原先陣列 node.data.label
            text = node.data('label').length > 18 ? `${node.data('label').substr(0,15)}...` : `${node.data('label')}`;

            return text
          },
          'text-opacity': 0.7,
          'background-color': 'data(backgroundColor)',
          'border-color': 'data(bordercolor)',
          'border-width': '1',
          'shape': 'data(shape)',
          'text-wrap': 'wrap',
          'text-max-width': 75,
          'text-halign': 'center',
          'text-valign': 'center',
          'height': 'data(height)',
          'width': 'data(width)',
          'color': '#001933',
          'font-size': 14,
        }
      },
      // edge 關係線的樣式
      {
        selector: 'edge',
        style: {
          'curve-style': 'taxi', // unbundled-bezier | taxi
          'target-arrow-shape': 'triangle', // 指向目標的箭頭形狀: 三角形
          'color': 'gray', //#0066cc
          'width': 'data(lineWidth)',
          'line-style': 'data(style)',
        }
      },
      // 點擊 node 後改變的樣式
      {
        selector: 'node:selected',
        style:{
         'border-color': 'red',
         'border-width': '3',
        }
      },
    ],
  });

  // creat tippy.js
  let tip;
  cy.on('mouseover', 'node', function(event) {
    var node = event.target
    let ref = node.popperRef()
    let dummyDomEle = document.createElement('div');
    let content = document.createElement('div');
    content.innerHTML = node.data("label")
    tip = new tippy(dummyDomEle, { // tippy props:
        getReferenceClientRect: ref.getBoundingClientRect,
        trigger: 'manual',
        content:content
        });
    tip.show();
    // if(node.data("label").length > 18) tip.show();
  })
  cy.on('mouseout', 'node', function(event) {
    tip.hide();
  });
}