/*global window, rJS, RSVP, console, Plotly */
/*jslint nomen: true, indent: 2 */
(function (window, rJS, RSVP, Plotly, wendelin, loopEventListener) {
  "use strict";

  var gadget_klass = rJS(window);

  gadget_klass
    .declareAcquiredMethod("getSetting", "getSetting")
    .declareAcquiredMethod("jio_get", "jio_get")
    .declareAcquiredMethod("jio_getAttachment", "jio_getAttachment")
    .declareService(function () {
      var gadget = this;
      return loopEventListener(window, 'resize', false, function () {
        Plotly.Plots.resize(gadget.element.querySelector('.graph-initial-success-rate'));
        Plotly.Plots.resize(gadget.element.querySelector('.graph-added-success-rate'));
      });
    })
    .declareMethod('render', function (option_dict) {
      var gadget = this,
        i,
        initial_success_data,
        added_success_data,
        label_list = ["vt", "vInititialEPSBEstabSR_lo", "vInititialEPSBEstabSR_hi", "vAddedEPSBEstabSR_lo", "vAddedEPSBEstabSR_hi"];
      return new RSVP.Queue().push(function () {
        return wendelin.getArrayRawSlice(gadget, option_dict.data_array_key);
      })
        .push(function (result) {
          var graph_data = nj.unpack(result.pick(null, label_list)),
            date = [],
            vInititialEPSBEstabSR_lo = [],
            vInititialEPSBEstabSR_hi = [],
            vAddedEPSBEstabSR_lo = [],
            vAddedEPSBEstabSR_hi = [];
          for (i = 0; i < graph_data.length; i += 1) {
            date.push(new Date(graph_data[i][0] * 1000));
            vInititialEPSBEstabSR_lo.push(graph_data[i][1]);
            vInititialEPSBEstabSR_hi.push(graph_data[i][2]);
            vAddedEPSBEstabSR_lo.push(graph_data[i][3]);
            vAddedEPSBEstabSR_hi.push(graph_data[i][4]);
          }
          initial_success_data = [
            {
              x: date,
              mode: 'lines+markers',
              y: vInititialEPSBEstabSR_lo,
              type: 'scatter',
              line: {shape: 'hv'},
              hovertemplate: 'Date: %{x}<br>Rate: %{y}%',
              name: 'InititialEPSBEstabSR'
            },
            {
              x: date,
              mode: 'lines',
              fill: 'tonexty',
              y: vInititialEPSBEstabSR_hi,
              line: {
                color: "#6cb9e5",
                shape: 'hv'
              },
              name: 'InititialEPSBEstabSR uncertainty',
              type: 'scatter',
              hoverinfo: 'none'
            }
          ];
          added_success_data = [
            {
              x: date,
              mode: 'lines+markers',
              y: vAddedEPSBEstabSR_lo,
              type: 'scatter',
              line: {shape: 'hv'},
              hovertemplate: 'Date: %{x}<br>Rate: %{y}%',
              name: 'AddedEPSBEstabSR'
            },
            {
              x: date,
              mode: 'lines',
              fill: 'tonexty',
              y: vAddedEPSBEstabSR_hi,
              line: {
                color: "#6cb9e5",
                shape: 'hv'
              },
              name: 'AddedEPSBEstabSR uncertainty',
              type: 'scatter',
              hoverinfo: 'none'
            }
          ];
          Plotly.newPlot(
            gadget.element.querySelector('.graph-initial-success-rate'),
            initial_success_data,
            {
              'title' : 'Initial E-RAB establishment success rate',
              'xaxis': {
                'autorange': true,
                'autosize': true
              },
              'yaxis': {
                title: {
                  text: '%'
                }
              }
            }
          );
          Plotly.newPlot(
            gadget.element.querySelector('.graph-added-success-rate'),
            added_success_data,
            {
              'title' : 'Added E-RAB establishment success rate',
              'xaxis': {
                'autorange': true,
                'autosize': true
              },
              'yaxis': {
                title: {
                  text: '%'
                }
              }
            }
          );
          gadget.element.querySelector('.ui-icon-spinner').hidden = true;
        });
    });

}(window, rJS, RSVP, Plotly, wendelin, loopEventListener));
