(function () {

  var isoFormat = 'YYYY-MM-DDTHH:mm:ss';

  function DlLineChartDirective($timeout, DillerClient) {
    var id_seq = 0;

    return {
      restrict: 'E',
      scope: {
        device: '=',
        property: '=',
        value: '=',
        interval: '='
      },
      replace: true,
      template: '<div/>',
      link: function (scope, element, attrs) {
        var elementId = element.attr('id');
        if (!elementId) {
          elementId = 'dl-line-chart-' + id_seq++;
          element.attr('id', elementId);
        }

        var deviceId = scope.device;
        var propertyId = scope.property;
        var interval = Diller.Interval.create(scope.interval);
        var property = DillerClient.getDevice(deviceId).getProperty(propertyId);

        var options = {
          axisX: {
            showLabel: true,
            showGrid: true,
            labelInterpolationFnc: function (value, index) {
              return index % 4 === 0 ? value.format('HH:mm') : null;
            }
          }
        };

        property.getInterval(interval).then(function (data) {
          var avgs = _.pluck(data.values, 'avg');
          var timestamps = _.map(data.values, function (row) {
            return moment(row.timestamp, isoFormat);
          });

          var chartData = {
            labels: timestamps,
            series: [
              avgs
            ]
          };

          var chart = new Chartist.Line('#' + elementId, chartData, options);
        });
      }
    };
  }

  angular
    .module('diller.line-chart', ['diller.client'])
    .directive('dlLineChart', DlLineChartDirective);
})();