const {remote}                      = require('electron');
const {dialog,Menu,MenuItem}        = remote;

module.exports = function(Cat) {
  return {
    init: function(dom) {
      let treeView = document.querySelector('#element-selector');
      treeView.addEventListener('click-row', evt => {
        if (!evt.detail.targetNode) return;
        Cat.focusedProject.view.focusedElement = evt.detail.targetNode;
      });
      treeView.parentNode.addEventListener('contextmenu', evt => {
        var target = evt.target;
        if (target.tagName === 'CAT-TREE-CELL') {
          target = target.parentNode;
        }
        const treeMenu = new Menu();
        if (target !== null && target !== undefined && target === treeView.selectedRow) {
          treeMenu.append(new MenuItem({label: 'Insert Element Before', enabled: (Cat.focusedProject ? true : false), click() {
          }}));
          treeMenu.append(new MenuItem({label: 'Insert Element Into', enabled: (Cat.focusedProject ? true : false), click() {
          }}));
          treeMenu.append(new MenuItem({label: 'Insert Element After', enabled: (Cat.focusedProject ? true : false), click() {
          }}));
        } else {
          treeMenu.append(new MenuItem({label: 'Insert Element', enabled: (Cat.focusedProject ? true : false), click() {
          }}));
        }
        if (target.tagName !== 'CAT-TREE-ROW') {
          target = treeView.selectedRow;
        }

        treeMenu.append(new MenuItem({type: 'separator'}));
        treeMenu.append(new MenuItem({label: 'Delete', enabled: (target ? true : false), click() {
          treeView.removeRow(target);
        }}));
        treeMenu.popup({async: true});
      });
      treeView.addEventListener('remove-row', evt => {
        console.log(evt.detail.row);
        if (evt.detail.row.targetNode && evt.detail.row.targetNode.parentNode) evt.detail.row.targetNode.parentNode.removeChild(evt.detail.row.targetNode);
      });

    },
    on: {
      // Add hook for when an element is selected on the project view, we select the given row in our elements tree
      'project-loaded': e => {
         e.detail.proj.view.addEventListener('selected-element', evt => {
           var el = this.elementsView.getMatchingRow(evt.detail);
           if (el) this.elementsView.selectedRow = el;
         });
      },
      // Add hook for when a project is focused, we rebuild the elements tree to correspond to the target DOM
      'project-focused': e => {
        this.elementsView = document.querySelector('#element-selector');
        this.elementsView.cloneDomToRows(Cat.focusedProject.view.querySelector('iframe').contentDocument.querySelector('body'), ["tagName", "class", "id"]);
      }
    }
  }
};