// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

 /**
  * Plot a line graph of data versus time on a HTML canvas element.
  *
  * @param {HTMLCanvasElement} canvas The canvas on which the line graph is
  *     drawn.
  * @param {Array.<number>} tData The time (in seconds) in the past when the
  *     corresponding data in plots was sampled.
  * @param {Array.<Object>} plots An array of objects with fields 'data' and
  *     'color'. The field 'data' is an array of samples to be plotted as a
  *     line graph with 'color'. The elements in the 'data' array are ordered
  *     corresponding to their sampling time in the argument 'tData'. Also,
  *     the number of elements in the data array should be the same as in the
  *     time array 'tData' above.
  * @param {number} yMin Minimum bound of y-axis
  * @param {number} yMax Maximum bound of y-axis.
  * @param {integer} yPrecision An integer value representing the number of
  *     digits of precision the y-axis data should be printed with.
  */
function plotLineGraph(canvas, tData, plots, yMin, yMax, yPrecision) {
  var textFont = '12px Arial';
  var textHeight = 12;
  var padding = 5;  // Pixels
  var errorOffsetPixels = 15;
  var gridColor = '#ccc';
  var ctx = canvas.getContext('2d');
  var size = tData.length;

  function drawText(text, x, y) {
    ctx.font = textFont;
    ctx.fillStyle = '#000';
    ctx.fillText(text, x, y);
  }

  function printErrorText(text) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawText(text, errorOffsetPixels, errorOffsetPixels);
  }

  if (size < 2) {
    printErrorText(loadTimeData.getString('notEnoughDataAvailableYet'));
    return;
  }

  for (var count = 0; count < plots.length; count++) {
    if (plots[count].data.length != size) {
      printErrorText(loadTimeData.getString('timeAndPlotDataMismatch'));
      return;
    }
  }

  function valueToString(value) {
    return Number(value).toPrecision(yPrecision);
  }

  function getTextWidth(text) {
    ctx.font = textFont;
    // For now, all text is drawn to the left of vertical lines, or centered.
    // Add a 2 pixel padding so that there is some spacing between the text
    // and the vertical line.
    return Math.round(ctx.measureText(text).width) + 2;
  }

  function drawHighlightText(text, x, y, color) {
    ctx.strokeStyle = '#000';
    ctx.strokeRect(x, y - textHeight, getTextWidth(text), textHeight);
    ctx.fillStyle = color;
    ctx.fillRect(x, y - textHeight, getTextWidth(text), textHeight);
    ctx.fillStyle = '#fff';
    ctx.fillText(text, x, y);
  }

  function drawLine(x1, y1, x2, y2, color) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.strokeStyle = color;
    ctx.stroke();
    ctx.restore();
  }

  // The strokeRect method of the 2d context of a canvas draws a bounding
  // rectangle with an offset origin and greater dimensions. Hence, use this
  // function to draw a rect at the desired location with desired dimensions.
  function drawRect(x, y, width, height, color) {
    drawLine(x, y, x + width - 1, y, color);
    drawLine(x, y, x, y + height - 1, color);
    drawLine(x, y + height - 1, x + width - 1, y + height - 1, color);
    drawLine(x + width - 1, y, x + width - 1, y + height - 1, color);
  }

  var yMinStr = valueToString(yMin);
  var yMaxStr = valueToString(yMax);
  var yHalfStr = valueToString((yMax + yMin) / 2);
  var yMinWidth = getTextWidth(yMinStr);
  var yMaxWidth = getTextWidth(yMaxStr);
  var yHalfWidth = getTextWidth(yHalfStr);

  var xMinStr = tData[0];
  var xMaxStr = tData[size - 1];
  var xMinWidth = getTextWidth(xMinStr);
  var xMaxWidth = getTextWidth(xMaxStr);

  var xOrigin = padding + Math.max(yMinWidth,
                                   yMaxWidth,
                                   Math.round(xMinWidth / 2));
  var yOrigin = padding + textHeight;
  var width = canvas.width - xOrigin - Math.floor(xMaxWidth / 2) - padding;
  if (width < size) {
    canvas.width += size - width;
    width = size;
  }
  var height = canvas.height - yOrigin - textHeight - padding;

  function drawPlots() {
    // Start fresh.
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw the bounding rectangle.
    drawRect(xOrigin, yOrigin, width, height, gridColor);

    // Draw the x and y bound values.
    drawText(yMaxStr, xOrigin - yMaxWidth, yOrigin + textHeight);
    drawText(yMinStr, xOrigin - yMinWidth, yOrigin + height);
    drawText(xMinStr, xOrigin - xMinWidth / 2, yOrigin + height + textHeight);
    drawText(xMaxStr,
             xOrigin + width - xMaxWidth / 2,
             yOrigin + height + textHeight);

    // Draw y-level (horizontal) lines.
    drawLine(xOrigin, yOrigin + height / 4,
             xOrigin + width - 1, yOrigin + height / 4,
             gridColor);
    drawLine(xOrigin, yOrigin + height / 2,
             xOrigin + width - 1, yOrigin + height / 2, gridColor);
    drawLine(xOrigin, yOrigin + 3 * height / 4,
             xOrigin + width - 1, yOrigin + 3 * height / 4,
             gridColor);

    // Draw half-level value.
    drawText(yHalfStr,
             xOrigin - yHalfWidth,
             yOrigin + height / 2 + textHeight / 2);

    // Draw the plots.
    var yValRange = yMax - yMin;
    for (var count = 0; count < plots.length; count++) {
      var plot = plots[count];
      var yData = plot.data;
      ctx.strokeStyle = plot.color;
      ctx.beginPath();
      for (var i = 0; i < size; i++) {
        var xPos = xOrigin + Math.floor(i / (size - 1) * (width - 1));
        var val = yData[i];
        var yPos = yOrigin + height - 1 -
                   Math.round((val - yMin) / yValRange * (height - 1));
        if (i == 0) {
          ctx.moveTo(xPos, yPos);
        } else {
          ctx.lineTo(xPos, yPos);
        }
      }
      ctx.stroke();
    }
  }

  function drawTimeGuide(tDataIndex) {
    var x = xOrigin + tDataIndex / (size - 1) * (width - 1);
    drawLine(x, yOrigin, x, yOrigin + height - 1, '#000');
    drawText(tData[tDataIndex],
             x - getTextWidth(tData[tDataIndex]) / 2,
             yOrigin - 2);

    for (var count = 0; count < plots.length; count++) {
      var yData = plots[count].data;

      // Draw small black square on the plot where the time guide intersects
      // it.
      var val = yData[tDataIndex];
      var yPos = yOrigin + height - 1 -
                 Math.round((val - yMin) / (yMax - yMin) * (height - 1));
      ctx.fillStyle = '#000';
      ctx.fillRect(x - 2, yPos - 2, 4, 4);

      // Draw the val to right of the intersection.
      var valStr = valueToString(val);
      var yLoc;
      if (yPos - textHeight / 2 < yOrigin) {
        yLoc = yOrigin + textHeight;
      } else if (yPos + textHeight / 2 >= yPos + height) {
        yLoc = yOrigin + height - 1;
      } else {
        yLoc = yPos + textHeight / 2;
      }
      drawHighlightText(valStr, x + 5, yLoc, plots[count].color);
    }
  }

  function onMouseOverOrMove(event) {
    drawPlots();

    var boundingRect = canvas.getBoundingClientRect();
    var x = event.clientX - boundingRect.left;
    var y = event.clientY - boundingRect.top;
    if (x < xOrigin || x >= xOrigin + width ||
        y < yOrigin || y >= yOrigin + height) {
      return;
    }

    if (width == size) {
      drawTimeGuide(x - xOrigin);
    } else {
      drawTimeGuide(Math.round((x - xOrigin) / (width - 1) * (size - 1)));
    }
  }

  function onMouseOut(event) {
    drawPlots();
  }

  drawPlots();
  canvas.addEventListener('mouseover', onMouseOverOrMove);
  canvas.addEventListener('mousemove', onMouseOverOrMove);
  canvas.addEventListener('mouseout', onMouseOut);
}

/**
 * Display the battery charge vs time on a line graph.
 *
 * @param {Array.<Object>} powerSupplyArray An array of objects with fields
 *     representing the battery charge, time when the charge measurement was
 *     taken, and whether there was external power connected at that time.
 */
function showBatteryChargeData(powerSupplyArray) {
  var tData = [];
  var chargePlot = [
    {
      color: '#0000FF',
      data: []
    }
  ];
  var dischargeRatePlot = [
    {
      color: '#FF0000',
      data: []
    }
  ];
  var minDischargeRate = 1000;  // A high unrealistic number to begin with.
  var maxDischargeRate = -1000; // A low unrealistic number to begin with.
  for (var i = 0; i < powerSupplyArray.length; i++) {
    var time = new Date(powerSupplyArray[i].time);
    tData[i] = time.toLocaleTimeString();

    chargePlot[0].data[i] = powerSupplyArray[i].battery_percent;

    var dischargeRate = powerSupplyArray[i].battery_discharge_rate;
    dischargeRatePlot[0].data[i] = dischargeRate;
    minDischargeRate = Math.min(dischargeRate, minDischargeRate);
    maxDischargeRate = Math.max(dischargeRate, maxDischargeRate);
  }
  if (minDischargeRate == maxDischargeRate) {
    // This means that all the samples had the same value. Hence, offset the
    // extremes by a bit so that the plot looks good.
    minDischargeRate -= 1;
    maxDischargeRate += 1;
  }

  var chargeCanvas = $('battery-charge-percentage-canvas');
  var dischargeRateCanvas = $('battery-discharge-rate-canvas');
  plotLineGraph(chargeCanvas, tData, chargePlot, 0.00, 100.00, 3);
  plotLineGraph(dischargeRateCanvas,
                tData,
                dischargeRatePlot,
                minDischargeRate,
                maxDischargeRate,
                3);
}

function requestBatteryChargeData() {
  chrome.send('requestBatteryChargeData');
}

var powerUI = {
  showBatteryChargeData: showBatteryChargeData
};

document.addEventListener('DOMContentLoaded', function() {
  requestBatteryChargeData();
  $('battery-charge-reload-button').onclick = requestBatteryChargeData;
});