import {inject, customElement, bindable, containerless} from 'aurelia-framework';
import $ from 'jquery';
import 'npm:gsap@1.18.0/src/minified/TweenMax.min.js';
import {strokeColor, strokeDash} from './edgeStyle.js';

const EDGE_ANIMATE_DURATION = 0.5;

@customElement('edge')
@containerless
@inject(Element)
export class Edge {
  @bindable data;
  @bindable sourcex;
  @bindable sourcey;
  @bindable targetx;
  @bindable targety;

  constructor(element) {
    this.element = element;
  }

  dataChanged(newVal) {
    if (newVal) {
      this.displayEdge = newVal;
    }
  }

  attached() {
    // Selector
    this.$edge = $(`#edge-${this.displayEdge.source.id}-${this.displayEdge.target.id}`);

    // Animate edge target from source point
    TweenLite.from(this.$edge[0], EDGE_ANIMATE_DURATION, {
      attr: {x2: this.displayEdge.source.x, y2: this.displayEdge.source.y},
      ease: Power1.easeIn
    });

  }

  sourcexChanged(newVal, oldVal) {
    if (newVal && oldVal) {
      TweenLite.from(this.$edge[0], EDGE_ANIMATE_DURATION, {
        attr: {x1: oldVal},
        ease: Power1.easeIn,
      });
    }
  }

  sourceyChanged(newVal, oldVal) {
    if (newVal && oldVal) {
      TweenLite.from(this.$edge[0], EDGE_ANIMATE_DURATION, {
        attr: {y1: oldVal},
        ease: Power1.easeIn,
      });
    }
  }

  targetxChanged(newVal, oldVal) {
    if (newVal && oldVal) {
      TweenLite.from(this.$edge[0], EDGE_ANIMATE_DURATION, {
        attr: {x2: oldVal},
        ease: Power1.easeIn
      });
    }
  }

  /**
   * Edge y2 is already bound to newVal,
   * therefore animate FROM oldVal.
   */
  targetyChanged(newVal, oldVal) {
    if (newVal && oldVal) {
      TweenLite.from(this.$edge[0], EDGE_ANIMATE_DURATION, {
        attr: {y2: oldVal},
        ease: Power1.easeIn
      });
    }
  }

  // TODO edge styling based on edgeKind is still a wip...
  edgeStrokeDashArray() {
    return strokeDash(this.displayEdge.edgeKind);
  }

  // TODO edge styling based on edgeKind is still a wip...
  edgeStyle() {
    // stroke-dasharray="none" style="stroke-width: 1px; stroke: rgb(124, 124, 124);"
  }

}

@@ -245,16 +245,57 @@
 N = 0.5;
+%0Aconst EDGE_ANIMATE_EASE = Power1.easeIn;
 %0A%0A@custo
@@ -731,16 +731,90 @@
 id%7D%60);%0A%0A
+    // Leaving this one out, still noticing intermittent edges to nowhere%0A
     // A
@@ -853,16 +853,19 @@
 oint%0A   
+ //
  TweenLi
@@ -912,26 +912,29 @@
 TION, %7B%0A    
+//
   
+ 
 attr: %7Bx2: t
@@ -994,16 +994,19 @@
 .y%7D,%0A   
+ //
    ease:
@@ -1006,33 +1006,40 @@
   ease: 
-Power1.easeIn
+EDGE_ANIMATE_EASE
 %0A   
+ //
  %7D);%0A%0A  
@@ -1203,37 +1203,41 @@
       ease: 
-Power1.easeIn
+EDGE_ANIMATE_EASE
 ,%0A      %7D);%0A
@@ -1413,29 +1413,33 @@
   ease: 
-Power1.easeIn
+EDGE_ANIMATE_EASE
 ,%0A      
@@ -1615,37 +1615,41 @@
       ease: 
-Power1.easeIn
+EDGE_ANIMATE_EASE
 %0A      %7D);%0A 
@@ -1913,29 +1913,33 @@
   ease: 
-Power1.easeIn
+EDGE_ANIMATE_EASE
 %0A      %7D

remove attached animation still has some intermittent issues