import cytoscape from 'cytoscape';
import $ from 'jquery';
import contextMenus from 'cytoscape-context-menus';

// register extension
cytoscape.use(contextMenus, $);

// import CSS as well
import 'cytoscape-context-menus/cytoscape-context-menus.css';

var cytoscape = require('cytoscape');
var jquery = require('jquery');
var contextMenus = require('cytoscape-context-menus');

contextMenus( cytoscape, jquery ); // register extension

require(['cytoscape', 'cytoscape-context-menus', 'jquery'], function( cytoscape, contextMenus, jquery ){
  contextMenus( cytoscape, jquery ); // register extension
});

var options = {
    // Customize event to bring up the context menu
    // Possible options https://js.cytoscape.org/#events/user-input-device-events
    evtType: 'cxttap',
    // List of initial menu items
    menuItems: [/*
      {
        id: 'remove', // ID of menu item
        content: 'remove', // Display content of menu item
        tooltipText: 'remove', // Tooltip text for menu item
        image: {src : "remove.svg", width : 12, height : 12, x : 6, y : 4}, // menu icon
        // Filters the elements to have this menu item on cxttap
        // If the selector is not truthy no elements will have this menu item on cxttap
        selector: 'node, edge', 
        onClickFunction: function () { // The function to be executed on click
          console.log('remove element');
        },
        disabled: false, // Whether the item will be created as disabled
        show: false, // Whether the item will be shown or not
        hasTrailingDivider: true, // Whether the item will have a trailing divider
        coreAsWell: false // Whether core instance have this item on cxttap
      },
      {
        id: 'hide',
        content: 'hide',
        tooltipText: 'hide',
        selector: 'node, edge',
        onClickFunction: function () {
          console.log('hide element');
        },
        disabled: true
      },
      {
        id: 'add-node',
        content: 'add node',
        tooltipText: 'add node',
        image: {src : "add.svg", width : 12, height : 12, x : 6, y : 4},
        selector: 'node',
        coreAsWell: true,
        onClickFunction: function () {
          console.log('add node');
        }
      }*/
    ],
    // css classes that menu items will have
    menuItemClasses: [
      // add class names to this list
    ],
    // css classes that context menu will have
    contextMenuClasses: [
      // add class names to this list
    ]
};

var instance = cy.contextMenus( options );

instance.isActive(); // Returns whether the extension is active.

instance.appendMenuItem(item); // Appends given menu item to the menu items list.

instance.appendMenuItems(items); // Appends menu items in the given list to the menu items list.

instance.removeMenuItem(itemID); // Removes the menu item with given ID.

instance.setTrailingDivider(itemID, status); // Sets whether the menuItem with given ID will have a following divider.

instance.insertBeforeMenuItem(item, existingItemID); // Inserts given item before the existingitem.

instance.moveBeforeOtherMenuItem(itemID, existingItemID); // Moves the item with given ID before the existingitem.

instance.disableMenuItem(itemID); // Disables the menu item with given ID.

instance.enableMenuItem(itemID); // Enables the menu item with given ID.

instance.showMenuItem(itemID); // Shows the menu item with given ID.

instance.hideMenuItem(itemID); // Hides the menu item with given ID.

instance.destroy(); // Destroys the extension instance

cy.contextMenus('get');