console.clear();
var log = console.log.bind(console);

//
// MAIN CONTROLLER
// ===========================================================================
class MainController {
  
  constructor() {
    
    // step data... whatever
    this.steps = [
      { id: 0 },
      { id: 1 },
      { id: 2 },
      { id: 3 },
      { id: 4 }
    ];
    
    this.currentIndex = 0;
  }
  
  nextStep() {
    this.currentIndex = Math.min(this.currentIndex + 1, this.steps.length - 1);
  }
  
  prevStep() {   
    this.currentIndex = Math.max(this.currentIndex - 1, 0);
  }
}

//
// STEP LIST
// ===========================================================================
class StepList {
  
  constructor($element, $scope, $animate, $timeout) {
    
    this.cursor = null;
    this.animation = null;
    
    this.$scope = $scope;
    this.$timeout = $timeout;    
    this.$element = $element;
    this.$animate = $animate;        
  }
  
  addCursor(cursor) {
    
    this.cursor = cursor;
    
    this.$scope.$watch(() => this.current, (step) => {      
      this.moveCursor(+step);
    });   
  }
  
  moveCursor(step, first) {
    
    if (!this.cursor) return;
    
    // Cancel current animation
    if (this.animation) {
      this.$animate.cancel(this.animation);
    }
    
    var icon = this.cursor.$element[0];    
    var dest = this.$element.children()[step];
        
    var rect1 = dest.getBoundingClientRect();
    var rect2 = icon.getBoundingClientRect();
        
    var x = `+=${rect1.left - rect2.left}`;
    var y = `+=${rect1.top  - rect2.top}`;
    
    this.animation = this.$animate.animate(icon, {}, { x, y });    
  }
}

var stepList = {  
  controller: StepList,
  templateUrl: "step-list.html",
  bindings: {
    current: "@",
    steps: "="
  }
};

//
// STEP PROGRESS
// ===========================================================================
var stepProgress = {
  templateUrl: "step-progress.html",
  bindings: {
    index: "@"
  }
};

//
// STEP CURSOR
// ===========================================================================
class StepCursor {
  
  constructor($element, $timeout) {
    
    this.$element = $element;
    
    TweenLite.set($element, { autoAlpha: 0 });
        
    $timeout(() => {
      this.parent.addCursor(this);
      TweenLite.to(this.$element, 1, { autoAlpha: 1 });
    });
  }
}

var stepCursor = {
  controller: StepCursor,
  templateUrl: "step-cursor.html",
  require: {
    parent: "^stepList"
  }
};

//
// CURSOR ANIMATION
// ===========================================================================
function cursorAnimation() {
  
  var tween = null;
  
  return {        
    animate: (element, from, to, done) => {
            
      var time = tween ? 0.5 : 0;     
      tween && tween.kill();
            
      tween = TweenLite.to(element, time, { x: to.x, y: to.y, onComplete: done });      
    }
  };
}

//
// MODULE
// ===========================================================================
angular
  .module('app', ["ngMaterial"])
  .animation(".cursor", cursorAnimation)
  .component("stepProgress", stepProgress)
  .component("stepList", stepList)
  .component("stepCursor", stepCursor)
  .controller("MainController", MainController);