var angular = require('angular');
require('../modules');
require('../services/Timer');

var module = angular.module('commons.directives.sinoSpeakerView');

var pathList = [
    'M17,8 A20,20 0 0,0 17,22',
    'M11,5 A25,25 0 0,0 11,25',
    'M5,0 A30,30 0 0,0 5,30'];
var DEFAULT_SPEAD = 300;
var MAX_STATE = 3;

/**
 * @ngdoc directive
 * @name commons.sinoSpeakerView
 * @restrict EA
 * @requires commons.Timer
 *
 * @description
 * 语音图标UI组件。使用SVG实现的。
 *
 * ```html
 * <sino-speaker-view ng-click="onClick()" animate="animate" spead="250"></sino-speaker-view>
 * ```
 *
 * ```javascript
 * function onClick() { //点击播放语音或者停止播放语音。
 *   $scope.animate = !scope.animate;
 * }
 * ```
 *
 * ## 如何更改动画执行过程中的组件样式？
 *
 * 在执行动画过程中，会给图标元素添加上`animating`样式类。所以可以按照下面的例子给组件加样式。
 * ```css
 * .sino-speaker-view {
 *   stroke: rgb(147,147,255)!important; \/*默认的颜色*\/
 * }
 * 
 * .sino-speaker-view.animating {
 *   stroke: white!important;
 * }
 * ```
 * 
 * @param {boolean=} [animate=false] 是否执行语音图标的动画效果，以表示正在播放语音。true时开始动画，false时结束动画。
 * @param {string} [direction=left] 语音图标展示的方向。有两个值，分别为left和right。默认为right。
 * @param {string} [spead=300] 单位为毫秒（ms），表示动画执行的速度。默认为300ms。
 * @param {integer} [width=20] 宽度
 * @param {integer} [height=32] 高度
 */
module.directive('sinoSpeakerView', function(Timer) {
  function initAnimate(scope) {
    var state = 1;
    var animateId;

    scope.$watch('animate', function(animate) {
      if (animate === true) {
        animateId = Timer.interval(function() {
          state = state + 1 > MAX_STATE? 1 : state + 1;
          scope.path = pathList.slice(0, state).join(' ');
        }, scope.spead);
      } else {
        Timer.clear(animateId);
        state = MAX_STATE;
        scope.path = pathList.slice(0, state).join(' ');
      }
    });

    scope.$watch('direction', function(direction) {
      scope.rotateAngle = direction === 'left'? 180 : 0;
    });
  }

  function link(scope) {
    scope.rotateAngle = scope.direction === 'left'? 180 : 0;
    scope.spead = parseInt(scope.spead || DEFAULT_SPEAD);
    scope.path = pathList.join(' ');
    scope.width = scope.width || 20;
    scope.height = scope.height || 32;
    scope.scale = {
      sx: scope.width / 20,
      sy: scope.height / 32
    };

    initAnimate(scope);
  }

  return {
    restrict: 'EA',
    template:
    '<svg ng-attr-width="{{width || 20}}" ng-attr-height="{{height || 32}}">' +
      '<g ng-attr-transform="scale({{scale.sx}}, {{scale.sy}})">' +
        '<g transform="translate(0,0)">' +
          '<g ng-attr-transform="rotate({{rotateAngle}} 9,15)">' +
            '<rect width="20" height="32" style="fill:none;stroke-width:0;stroke:none"></rect>' +
            '<path ' +
            ' ng-attr-d="{{path}}"' +
            ' class="sino-speaker-view"' +
            ' ng-class="{animating: animate}"' +
            ' style="fill:none; stroke: rgb(147,147,255); stroke-width:2;">' +
            '</path>' +
          '</g>' +
        '</g>' +
      '</g>' +
    '</svg>',
    scope: {
      animate: '=',
      direction: '@',
      spead: '@',
      width: '@',
      height: '@'
    },
    link: link
  };
});
