"use strict";

let f = (n, p=2) => { return parseFloat(Number(n).toFixed(p)); }

let budget = 5;
let setup = 1.6;
let kbps = 400; // kbps
let KBps = 400 / 8;
let time_per_KB = (1 / (170));

let data = [];
let closest_js = null;
let closest_static = null;

for(let x = 50; x < 250; x++) {
  let network_time = f(x / KBps);
  let client_time = f(x * time_per_KB);
  let total_time = f(setup + network_time + client_time);
  let item = {
    KB: x,
    data: x,
    network_time,
    client_time,
    total_time,
  };
  data.push(item);
  if ((setup + network_time) <= budget) {
    closest_static = item;
  }
  if (total_time <= budget) {
    closest_js = item;
  }
}

/* Borrowed from:
    http://bl.ocks.org/rkirsling/33a9e350516da54a5d4f
*/
function addAxesAndLegend (svg, bottomAxis, leftAxis,
                           margin, chartWidth, chartHeight) {
  var legendWidth  = 200,
      legendHeight = 155;

  var axes = svg.append('g')
    .attr('clip-path', 'url(#axes-clip)');

  axes.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + chartHeight + ')')
    .call(bottomAxis)
    .append('text')
      .attr('x', chartWidth - margin.right)
      .attr('dx', '.71em')
      .attr('y', -10)
      .style('text-anchor', 'end')
      .text('Data (KB)');

  axes.append('g')
    .attr('class', 'y axis')
    .call(leftAxis)
    .append('text')
      .attr('transform', 'rotate(-90)')
      .attr('y', 10)
      .attr('dy', '.71em')
      .style('text-anchor', 'end')
      .text('Time (s)');

  let legend = svg.append('g')
    .attr('class', 'legend')
    .attr('transform', 'translate(' + (40) + ', 0)');

  legend.append('rect')
    .attr('class', 'legend-bg')
    .attr('width',  legendWidth)
    .attr('height', legendHeight);

  legend.append('rect')
    .attr('class', 'transfer')
    .attr('width',  75)
    .attr('height', 20)
    .attr('x', 10)
    .attr('y', 10);

  legend.append('text')
    .attr('x', 115)
    .attr('y', 25)
    .text('Transfer');

  legend.append('rect')
    .attr('class', 'setup')
    .attr('width',  75)
    .attr('height', 20)
    .attr('x', 10)
    .attr('y', 40);

  legend.append('text')
    .attr('x', 115)
    .attr('y', 55)
    .text('Setup');

  legend.append('rect')
    .attr('class', 'client')
    .attr('width',  75)
    .attr('height', 20)
    .attr('x', 10)
    .attr('y', 70);

  legend.append('text')
    .attr('x', 115)
    .attr('y', 85)
    .text('Client');

  legend.append('path')
    .attr('class', 'median-line')
    .attr('d', 'M10,110L85,110');

  legend.append('text')
    .attr('x', 115)
    .attr('y', 115)
    .text('Total');

  legend.append('path')
    .attr('class', 'budget-line')
    .attr('d', 'M10,135L85,135');

  legend.append('text')
    .attr('x', 115)
    .attr('y', 140)
    .text('Budget');
}

function drawPaths (svg, data, x, y) {

  let medianLine = d3.line()
    .curve(d3.curveBasis)
    .x((d) => { return x(d.data); })
    .y((d) => { return y(d.total_time); });

  let setupArea = d3.area()
    .curve(d3.curveBasis)
    .x ((d) => { return x(d.data); })
    .y0((d) => { return y(0); })
    .y1((d) => { return y(setup); });

  let transferArea = d3.area()
    .curve(d3.curveBasis)
    .x ((d) => { return x(d.data); })
    .y0((d) => { return y(setup); })
    .y1((d) => { return y(setup + d.network_time); });

  let clientArea = d3.area()
    .curve(d3.curveBasis)
    .x ((d) => { return x(d.data); })
    .y0((d) => { return y(setup + d.network_time); })
    .y1((d) => { return y(setup + d.network_time + d.client_time); });

  svg.datum(data);

  let budgetLine = d3.line()
    .x((d) => { return x(d.data); })
    .y(() => { return y(budget); })

  svg.append("path")
    .attr("class", "area lower setup")
    .attr("d", setupArea)
    .attr("clip-path", "url(#rect-clip)");

  svg.append("path")
    .attr("class", "area lower transfer")
    .attr("d", transferArea)
    .attr("clip-path", "url(#rect-clip)");

  svg.append("path")
    .attr("class", "area lower client")
    .attr("d", clientArea)
    .attr("clip-path", "url(#rect-clip)");

  svg.append("path")
    .attr("class", "budget-line")
    .attr("d", budgetLine)
    .attr("clip-path", 'url(#rect-clip)');

  svg.append('text')
      .attr('y', y(budget))
      .attr('x', 130)
      .attr('dy', '1.5em')
      .style('text-anchor', 'end')
      .text(`Budget: ${budget} seconds`);

  svg.append('path')
    .attr('class', 'median-line')
    .attr('d', medianLine)
    .attr('clip-path', 'url(#rect-clip)');

}

function addMarker(marker, svg, chartHeight, x) {
  console.log(marker);
  var radius = 32,
      xPos = x(marker.data) - radius - 3,
      yPosStart = chartHeight - radius - 3,
      yPosEnd = 80 + radius - 3;

  var markerG = svg.append('g')
    .attr('class', "marker")
    .attr('transform', 'translate(' + xPos + ', ' + yPosStart + ')')
    .attr('opacity', 0);

  markerG.transition()
    .duration(1000)
    .attr('transform', 'translate(' + xPos + ', ' + yPosEnd + ')')
    .attr('opacity', 1);

  markerG.append('path')
    .attr('d', 'M' + radius + ',' + (chartHeight-yPosStart) + 'L' + radius + ',' + (chartHeight-yPosStart))
    .transition()
      .duration(1000)
      .attr('d', 'M' + radius + ',' + (chartHeight-yPosEnd) + 'L' + radius + ',' + (radius*2));

  markerG.append('circle')
    .attr('class', 'marker-bg')
    .attr('cx', radius)
    .attr('cy', radius)
    .attr('r', radius);

  markerG.append('text')
    .attr('x', radius)
    .attr('y', radius*0.9)
    .text(marker.data);

  markerG.append('text')
    .attr('x', radius)
    .attr('y', radius*1.5)
    .text("KB");
}

function startTransitions(svg, chartWidth, chartHeight, rectClip, markers, x) {
  rectClip.transition()
    .duration(1000*markers.length)
    .attr('width', chartWidth);

  markers.forEach(function (marker, i) {
    setTimeout(function () {
      addMarker(marker, svg, chartHeight, x);
    }, 1000 + 500*i);
  });
}

function makeChart(data, markers) {
  var svgWidth  = 960,
      svgHeight = 500,
      margin = { top: 20, right: 20, bottom: 40, left: 40 },
      chartWidth  = svgWidth  - margin.left - margin.right,
      chartHeight = svgHeight - margin.top  - margin.bottom;

  var svg = d3.select('body').append('svg')
    .attr('width',  svgWidth)
    .attr('height', svgHeight)
    .append('g')
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  // clipping to start chart hidden and slide it in later
  var rectClip = svg.append('clipPath')
    .attr('id', 'rect-clip')
    .append('rect')
      .attr('width', 0)
      .attr('height', chartHeight);

  // console.log("data:", data);
  let timeExtent = d3.extent(
    [0, budget*2].concat(data.map((d) => { return d.total_time; }))
  );

  var x = d3.scaleLinear().range([0, chartWidth])
            .domain(d3.extent(data, (d) => { return d.data; })),
      y = d3.scaleLinear().range([chartHeight, 0]).domain(timeExtent);

  let bottomAxis = d3.axisBottom(x);
  bottomAxis.tickSizeInner(-chartHeight).tickSizeOuter(0).tickPadding(10);

  let leftAxis = d3.axisLeft(y);
  leftAxis.tickSizeInner(-chartWidth).tickSizeOuter(0).tickPadding(10);

  drawPaths(svg, data, x, y);
  addAxesAndLegend(svg, bottomAxis, leftAxis, margin, chartWidth, chartHeight);
  startTransitions(svg, chartWidth, chartHeight, rectClip, markers, x);
}

window.addEventListener("load", (e) => {
  let markers = [];
  if(closest_js) {
    markers.push(closest_js);
  }
  if(closest_static) {
    markers.push(closest_static);
  }
  makeChart(data, markers);
});