/* globals Chart:false, feather:false */

//var ctx = document.getElementById('myChart')
//var mainContent = document.getElementById('mainContent')

function setPage(page) {
  document.getElementById("navbarPage" + currentPage + "Link").classList.remove("active")
  document.getElementById("navbarPage" + page + "Link").classList.add("active")
  currentPage = page
  // page: -1 for dashboard or sensor id
  var mainContent = document.getElementById('mainContent')

  // set page to loading state
  mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"

  blueweather.getLocationData(thisLoc, undefined, true, function(locationData){
      // refresh sensors list
  loadSensors(locationData.sensors)

  // set acive page in navbar
  document.getElementById("navbarPage" + page + "Link").classList.add("active")

  if(page === -1) {
    setPageTitle("Dashboard")
    mainContent.innerHTML = "<p>This is your great dashboard :))</p>"
  }
  else if (page !== -1) {
    loadDiagram("mainContent", locationData, page)
  }
  })

}

function setTimeRange(from="", to=""){
  blueweather.log("changing time range; form: " + from + "; to: " + to + "; (now is: " + new Date().getTime() + ")", 3)
  
  // set page to loading state
  mainContent.innerHTML = "<div class=\"d-flex justify-content-center\"><div class=\"spinner-border\" role=\"status\"><span class=\"sr-only\">Loading...</span></div></div>"
  
  if(from !== "") {
    from = new Date().getTime() / 1000 - from
  }
  
  if(to !== "") {
    to = new Date().getTime() / 1000 - parseInt(to)
  }

  blueweather.getLocationData(thisLoc, {from: from, to: to}, true, function(locationData){
    loadDiagram("mainContent", locationData, currentPage)
  })
  
}

function loadSensors(sensors) {

  var sensorsList = document.getElementById("sensorsList")
  sensorsList.innerHTML = ""

  for (var i = 0; i < sensors.length; i++) {
    var currentHTML = sensorsList.innerHTML
    sensorsList.innerHTML = currentHTML +
      "<li class=\"nav-item\"><a class=\"nav-link\" id=\"navbarPage" + sensors[i]["id"] + "Link\" href=\"#\" onclick=\"setPage(" + sensors[i]["id"] + ")\"><span data-feather=\"file\"></span>" + sensors[i]["sensorname"] + "</a></li>"
  }

  feather.replace()
}

function loadDiagram(parentId, locationData, sensorId){
  mainContent = document.getElementById(parentId)
  // get all relevant  meassurement values
  var vals = []

  for (var i = 0; i < locationData["measvalues"].length; i++) {
    var thisValue = locationData["measvalues"][i]
    if (parseInt(thisValue['sensorid']) === sensorId) {
      vals.push(thisValue)
    }
  }

  // get the current sensor
  var sensor;

  for (i = 0; i < locationData['sensors'].length; i++) {
    var thisSensor = locationData['sensors'][i]
    if (parseInt(thisSensor.id) === sensorId) {
      sensor = thisSensor;
      break;
    }
  }

  // get the value type
  var valueType;

  for (i = 0; i < locationData['valuetypes'].length; i++) {
    var thisValType = locationData['valuetypes'][i]
    if (parseInt(thisValType.id) === parseInt(sensor.valuetypeid)) {
      valueType = thisValType;
      break;
    }
  }

  // build chart data array
  var chartData = {
    label: sensor.sensorname + " (" + valueType.valuetype + ")",
    data: [],
    range: locationData.range
  }

  for (i = 0; i < vals.length; i++) {
    chartData.data.push({ x: vals[i]["timestamp"], y: vals[i]["measvalue"] })
  }

  mainContent.innerHTML = "<canvas class=\"my-4 w-100\" id=\"myChart\"></canvas>"
  setPageTitle(chartData.label)

  //blueweather.log("creating chart with data: " + JSON.stringify(chartData), 3)

  createDiagram("myChart", chartData)
}

function createDiagram(canvasId, data) {
  var pointradius = data.data.length > 500 ? 0:3
  // Graphs
  var ctx = document.getElementById(canvasId)
  // eslint-disable-next-line no-unused-vars

  var chartData = {
    //labels: time,
    datasets: [
      {
        label: data.label,
        yAxisID: 'yAxis',
        fill: false, pointRadius: pointradius, backgroundColor: "rgba(29, 202, 255, 0.75)", borderColor: "rgba(29, 202, 255, 1)", pointHoverBackgroundColor: "rgba(29, 202, 255, 1)", pointHoverBorderColor: "rgba(29, 202, 255, 1)",
        showLine: true,
        data: data.data
      }
    ]
  };

  var chartOptions = {
    responsive:true,
    maintainAspectRatio: false,
    scales: {
      yAxes: [
        {
          id: 'yAxis',
          type: 'linear',
          position: 'left',
        }
      ],

      xAxes: [{
        ticks: {
          min: parseInt(data.range.from), 
          max: parseInt(data.range.to),
          beginAtZero: false,
          stepSize: (data.range.to - data.range.from) / 10,
          userCallback: function (label, index, labels) {
            var d = new Date(parseInt(label) * 1000);
            var datestr =
              //  ("0" + d.getDate()).slice(-2) + "-" +
              //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
              //  d.getFullYear() + " " +
              ("0" + d.getHours()).slice(-2) + ":" +
              ("0" + d.getMinutes()).slice(-2) + ":" +
              ("0" + d.getSeconds()).slice(-2)
              ;
            return datestr;
          }
        },

        scaleLabel: {
          display: true,
          labelString: 'time'
        }
      }],
    },

    tooltips: {
      callbacks: {
        label: function (tooltipItem, data) {

          var label = [data.datasets[tooltipItem.datasetIndex].label || ''];

          if (label) {
            label[0] += ': ';
          }

          label[0] += Math.round(tooltipItem.yLabel * 100) / 100;

          var time = Math.round(tooltipItem.xLabel * 100) / 100;

          var d = new Date(time * 1000);
          var datestr =
            //  ("0" + d.getDate()).slice(-2) + "-" +
            //  ("0"+(d.getMonth()+1)).slice(-2) + "-" +
            //  d.getFullYear() + " " +
            ("0" + d.getHours()).slice(-2) + ":" +
            ("0" + d.getMinutes()).slice(-2) + ":" +
            ("0" + d.getSeconds()).slice(-2)
            ;

          label.push("Time: " + datestr);

          return label;
        }
      }
    }

  };

  var myChart = new Chart(ctx, {
    type: 'scatter',
    data: chartData,
    options: chartOptions
  })
}

function setPageTitle(title) {
  document.getElementById("titleH1").innerHTML = title
}

var blueweather = new BlueWeather()
var thisLoc = blueweather.findGetParameter("locId")
var currentPage = -1
setPage(currentPage)