import { getParentSvg } from './utils.js';

const normalizeEvent = e => {
  if (e.x == undefined) e.x = e.clientX;
  if (e.y == undefined) e.y = e.clientY;
};

export function register () {
  const store = {};
  const svg = this._svg;
  // DOM Events
  svg.addEventListener('mousedown', e => {
    normalizeEvent(e);
    this.lastSelected = null;
    const { target } = e;

    if (target.type === 'wire') {
      this.lastSelected = target.wrapper;
      return this.selectedWire = target.wrapper;
    }

    if (target.type === 'port' && target.direction === 'out') {
      return this.startAttach(target);
    }

    const parentSvg = getParentSvg(target);
    const shouldCapture = tagName => !['INPUT', 'SELECT', 'TEXTAREA', 'BUTTON'].includes(tagName);
    if (shouldCapture(target.tagName) && parentSvg && parentSvg.type == 'node') {
      const nodeNode = parentSvg;
      console.debug('Node selected:', nodeNode, 'Triggered by: ', target);
      var wrapper = nodeNode.wrapper;
      this.lastSelected = wrapper;
      this.dragging = nodeNode;
      var SVGbox = wrapper._svg.getBoundingClientRect();
      const offset = {
        x: e.x - SVGbox.left,
        y: e.y - SVGbox.top,
      };
      this._aux.mouseDown = { x: offset.x - wrapper.x, y: offset.y - wrapper.y };
      this._svg.appendChild(this.dragging);
      wrapper.wires.forEach(wire => this._svg.appendChild(wire._el));
    }

  }, false);

  document.addEventListener('keydown', e => {
    if (e.keyCode == 46) {
      console.debug('deleting', this.lastSelected);
      this.lastSelected.delete();
      // @TODO should remove from state (brick, wire, port)
    }
  }, false);

  svg.addEventListener('mouseup', e => {
    this.dragging = null;
    if(e.target.type === 'port')
      return this.endAttach(e.target);

    if(this.isState('attaching')) {
      this.setState(null)
      svg.removeChild(this._aux['wire']._el);
    }
  });

  svg.addEventListener('mousemove', e => {
    normalizeEvent(e);

    return this.attachMove(e);
  });

  svg.addEventListener('mousemove', e => {
    normalizeEvent(e);

    if (this.dragging) {
      var wrapper = this.dragging.wrapper;
      var SVGbox = wrapper._svg.getBoundingClientRect();
      var OffsetX = e.x - SVGbox.left;
      var OffsetY =  e.y - SVGbox.top;

      var firstState = this._aux.mouseDown;
      wrapper.x = OffsetX - firstState.x;
      wrapper.y = OffsetY - firstState.y;
      wrapper.updateWires();
    }
  });

  return store;
}
@@ -2112,27 +2112,29 @@
 ng) %7B%0A      
-var
+const
  wrapper = t
@@ -2153,35 +2153,37 @@
 .wrapper;%0A      
-var
+const
  SVGbox = wrappe
@@ -2216,27 +2216,73 @@
 ct();%0A      
-var
+const firstState = this._aux.mouseDown;%0A      let
  OffsetX = e
@@ -2305,19 +2305,19 @@
 ;%0A      
-var
+let
  OffsetY
@@ -2343,52 +2343,8 @@
 p;%0A%0A
-      var firstState = this._aux.mouseDown;%0A
     
@@ -2465,16 +2465,287 @@
 %0A  %7D);%0A%0A
+  let zoom = 1;%0A  const zoomVelocity = 0.1;%0A  window.addEventListener(%22wheel%22, event =%3E %7B%0A    const delta = Math.sign(event.deltaY);%0A    console.info('MouseWheel delta', delta);%0A    zoom = zoom - (zoomVelocity * delta);%0A    svg.style.transform = %60scale($%7Bzoom%7D)%60;%0A  %7D);%0A%0A
   return

Add zoom wheel event