// Common Controller for the montage view
/* jshint -W041 */
/* jslint browser: true*/
/* global saveAs, cordova,StatusBar,angular,console,ionic, moment, vis , Chart, DJS*/

angular.module('zmApp.controllers').controller('EventsModalGraphCtrl', ['$scope', '$rootScope', 'zm', 'NVRDataModel', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$q', '$sce', 'carouselUtils', '$ionicPopup', '$translate', function ($scope, $rootScope, zm, NVRDataModel, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $stateParams, $ionicHistory, $ionicScrollDelegate, $q, $sce, carouselUtils, $ionicPopup, $translate) {

  var Graph2d;
  var tcGraph;
  var items;
  var groups;
  var eventImageDigits = 5;
  var cv;
  var ctx;
  //var options;
  //var data;
  var onlyalarm_data;
  var current_data;
  var current_options;
  var btype;
  var data, options;
  var broadCastHandles = [];


  $scope.$on('modal.removed', function (e, m) {
    //NVRDataModel.debug("Deregistering broadcast handles");
    for (var i = 0; i < broadcastHandles.length; i++) {
      // broadcastHandles[i]();
    }
    broadcastHandles = [];
  });

  $scope.$on('modal.shown', function (e, m) {

    if (m.id != 'modalgraph')
      return;

    //console.log ("INSIDE MODAL GRAPH>>>>>>>>>>>>>>>>>");
    data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [{
          label: "My First dataset",
          fillColor: "rgba(220,220,220,0.5)",
          strokeColor: "rgba(220,220,220,0.8)",
          highlightFill: "rgba(220,220,220,0.75)",
          highlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
          label: "My Second dataset",
          fillColor: "rgba(151,187,205,0.5)",
          strokeColor: "rgba(151,187,205,0.8)",
          highlightFill: "rgba(151,187,205,0.75)",
          highlightStroke: "rgba(151,187,205,1)",
          data: [28, 48, 40, 19, 86, 27, 90]
        }
      ]
    };

    options = {

      scales: {
        yAxes: [{
          ticks: {
            // beginAtZero:true,
            min: -1,
          },
        }],
        xAxes: [{
          display: false
        }]
      },

      responsive: true,
      scaleBeginAtZero: true,
      scaleShowGridLines: true,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,

      hover: {
        mode: 'single',
        onHover: function (obj) {
          if (obj.length > 0)
            tapOrHover(obj[0]._index);
        }
      },

      //String - A legend template
      legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
    };

    cv = document.getElementById("eventchart");
    ctx = cv.getContext("2d");
    $timeout(function () {
      var tcGraph2 = new Chart(ctx, {
        type: 'bar',
        data: data,
        options: options
      });
    });
  });

  //-------------------------------------------------------
  // we use this to reload the connkey if authkey changed
  //------------------------------------------------------

  var as = $scope.$on("auth-success", function () {

    NVRDataModel.debug("EventModalCtrl: Re-login detected, resetting everything & re-generating connkey");

  });
  broadCastHandles.push(as);

  //-------------------------------------------------------
  // I was kidding, this is where it really is drawn
  // scout's promise
  //------------------------------------------------------

  function drawGraphTC(event) {

    $scope.eid = event.event.Event.Id;

    $scope.alarm_images = [];

    /*data = {
      labels: [],
      datasets: [
        {
          label: 'Score',
          fill:true,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(220,220,220,1)",
          pointBackgroundColor: "#e74c3c",
          backgroundColor: 'rgba(129, 207, 224, 1.0)',
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "#40d47e",
          pointHoverBorderWidth: 2,
          tension: 0.1,
          borderColor: 'rgba(129, 207, 224, 1.0)',
          hoverBackgroundColor: 'rgba(248, 148, 6,1.0)',
          hoverBorderColor: 'rgba(248, 148, 6,1.0)',
          data: [],
          frames: []
        },
        
      ]
    };*/

    data = {
      labels: [],
      datasets: [{
          label: $translate.instant('kScore'),
          fill: true,
          backgroundColor: 'rgba(129, 207, 224, 1.0)',
          borderColor: 'rgb(92, 147, 159)',
          borderCapStyle: 'butt',
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(220,220,220,1)",
          pointBackgroundColor: "#e74c3c",

          pointHoverRadius: 10,
          pointHoverBackgroundColor: "#f39c12",
          pointHoverBorderWidth: 1,
          tension: 0.1,

          data: [],
          frames: []
        },

      ]
    };

    onlyalarm_data = {
      labels: [],
      datasets: [{
          label: $translate.instant('kScore'),
          backgroundColor: 'rgba(129, 207, 224, 1.0)',
          borderColor: 'rgba(129, 207, 224, 1.0)',
          hoverBackgroundColor: 'rgba(248, 148, 6,1.0)',
          hoverBorderColor: 'rgba(248, 148, 6,1.0)',
          data: [],
          frames: []
        },

      ]
    };

    // Chart.js Options
    options = {

      scales: {
        yAxes: [{
          ticks: {
            // beginAtZero:true,
            min: -1,
          },
        }],
        xAxes: [{
          display: false
        }]
      },

      responsive: true,
      scaleBeginAtZero: true,
      scaleShowGridLines: true,
      scaleGridLineColor: "rgba(0,0,0,.05)",
      scaleGridLineWidth: 1,

      hover: {
        mode: 'single',
        onHover: function (obj) {
          if (obj.length > 0)
            tapOrHover(obj[0]._index);
        }
      },

      //String - A legend template
      legendTemplate: '<ul class="tc-chart-js-legend"><% for (var i=0; i<datasets.length; i++){%><li><span style="background-color:<%=datasets[i].fillColor%>"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>'
    };

    $scope.graphWidth = event.event.Frame.length * 10;
    if ($scope.graphWidth < $rootScope.devWidth)
      $scope.graphWidth = $rootScope.devWidth;

    // NVRDataModel.log ("Changing graph width to " + $scope.graphWidth);

    for (var i = 0; i < event.event.Frame.length; i++) {

      data.labels.push(event.event.Frame[i].TimeStamp);
      //data.labels.push(' ');
      data.datasets[0].data.push(event.event.Frame[i].Score);
      data.datasets[0].frames.push({
        x: event.event.Frame[i].TimeStamp,
        y: event.event.Frame[i].Score,
        eid: event.event.Event.Id,
        fid: event.event.Frame[i].FrameId,
        //group:i,
        relativePath: computeRelativePath(event.event),
        score: event.event.Frame[i].Score,
        fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",

      });

      if (event.event.Frame[i].Type == "Alarm") {

        onlyalarm_data.labels.push(event.event.Frame[i].TimeStamp);
        //data.labels.push(' ');
        onlyalarm_data.datasets[0].data.push(event.event.Frame[i].Score);
        onlyalarm_data.datasets[0].frames.push({
          x: event.event.Frame[i].TimeStamp,
          y: event.event.Frame[i].Score,
          eid: event.event.Event.Id,
          fid: event.event.Frame[i].FrameId,
          //group:i,
          relativePath: computeRelativePath(event.event),
          score: event.event.Frame[i].Score,
          fname: padToN(event.event.Frame[i].FrameId, eventImageDigits) + "-capture.jpg",

        });
      }

    }

    $scope.dataReady = true;

    cv = document.getElementById("tcchart");
    ctx = cv.getContext("2d");

    if (NVRDataModel.getLogin().timelineModalGraphType == 'all') {
      btype = 'line';
      current_data = data;
    } else {
      btype = 'bar';
      current_data = onlyalarm_data;
    }
    $timeout(function () {
      tcGraph = new Chart(ctx, {
        type: btype,
        data: current_data,
        options: options
      });
    });

    cv.onclick = function (e) {
      var b = tcGraph.getElementAtEvent(e);
      if (b.length > 0) {
        tapOrHover(b[0]._index);
      }
    };
  }

  function tapOrHover(ndx) {

    $timeout(function () {

      //console.log ("You tapped " + ndx);
      $scope.alarm_images = [];
      $scope.playbackURL = NVRDataModel.getLogin().url;
      var items = current_data.datasets[0].frames[ndx];
      $scope.alarm_images.push({
        relativePath: items.relativePath,
        fid: items.fid,
        fname: items.fname,
        score: items.score,
        time: moment(items.x).format("MMM D," + NVRDataModel.getTimeFormatSec()),
        eid: items.eid
      });
    });

  }

  //--------------------------------------------------------
  // utility function
  //--------------------------------------------------------

  function computeRelativePath(event) {
    var relativePath = "";
    var loginData = NVRDataModel.getLogin();
    var str = event.Event.StartTime;
    var yy = moment(str).locale('en').format('YY');
    var mm = moment(str).locale('en').format('MM');
    var dd = moment(str).locale('en').format('DD');
    var hh = moment(str).locale('en').format('HH');
    var min = moment(str).locale('en').format('mm');
    var sec = moment(str).locale('en').format('ss');
    relativePath = event.Event.MonitorId + "/" +
      yy + "/" +
      mm + "/" +
      dd + "/" +
      hh + "/" +
      min + "/" +
      sec + "/";
    return relativePath;

  }

  //--------------------------------------------------------
  // utility function
  //--------------------------------------------------------

  function computeBasePath(event) {
    var basePath = "";
    var loginData = NVRDataModel.getLogin();
    var str = event.Event.StartTime;
    var yy = moment(str).locale('en').format('YY');
    var mm = moment(str).locale('en').format('MM');
    var dd = moment(str).locale('en').format('DD');
    var hh = moment(str).locale('en').format('HH');
    var min = moment(str).locale('en').format('mm');
    var sec = moment(str).locale('en').format('ss');

    basePath = loginData.url + "/events/" +
      event.Event.MonitorId + "/" +
      yy + "/" +
      mm + "/" +
      dd + "/" +
      hh + "/" +
      min + "/" +
      sec + "/";
    return basePath;
  }

  function padToN(number, digits) {

    var i;
    var stringMax = "";
    var stringLeading = "";
    for (i = 1; i <= digits; i++) {
      stringMax = stringMax + "9";
      if (i != digits) stringLeading = stringLeading + "0";
    }
    var numMax = parseInt(stringMax);

    if (number <= numMax) {
      number = (stringLeading + number).slice(-digits);
    }
    //console.log ("PADTON: returning " + number);
    return number;
  }

}]);