// set margins by convention
const margin = {top: 50, right: 80, bottom: 70, left: 50},
      width = 700,
      height = 300;

const URL = "https://gist.githubusercontent.com/fraziern/95fc8cfce299accd608928caf65f134f/raw/42095ee60cf540b78b37fc33017d03632af9f77d/trendsdata.csv";

const svg = d3.select(".chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

const chart = svg
  .append("g")
  .attr("transform", `translate(${margin.left},${margin.top})`);

const tooltip = d3
  .select('#tooltip');

// initialize the ranges
const x = d3.scaleUtc()
  .range([0, width])
  .clamp(true);  // prevent rollover OB errors

const y = d3.scaleLinear()
  .domain([0, 100])
  .range([height, 0]);

function createChart(rawData) {

  // data wrangling
  const categories = d3.keys(rawData[0]).filter(d => d !== "Week" && d !== "date");
  const data = categories.map(c => ({
    category: c,
    values: rawData.map(d => ({
      date: d.date,
      value: d[c]
    }))
  }));
  
  x.domain(d3.extent(data[0].values, d => d.date));
  
  // add axes
  let yAxisGenerator = d3.axisLeft(y).tickSize(-width).ticks(5);
  svg.append('g')
    .attr("class", "axis yaxis")
    .attr("transform", `translate(${margin.left - 10},${margin.top})`)
    .call(yAxisGenerator);
  
  let xAxisGenerator = d3.axisBottom(x);
  svg.append('g')
    .attr("class", "axis xaxis")
    .attr("transform", `translate(${margin.left},${margin.top + height})`)
    .call(xAxisGenerator);
  
  // colors
  const color = d3.scaleOrdinal(d3.schemeCategory10)
    .domain(categories);
  
  const valueline = d3.line()
    .x(d => x(d.date))
    .y(d => y(d.value));
  
  // Add the paths.
  const name = chart.selectAll(".name")
      .data(data)
    .join("g")
      .attr("class", "name");
  
  name.append("path")
      .attr("class", "line")
      .attr("d", d => valueline(d.values))
      .style("stroke", d => color(d.category));
 
  // rollover implementation
  // Create data rows based on categories
  let ttrows = d3.select('#tt-data table')
      .selectAll('tr')
      .data(categories)
      .join('tr');

  svg.on("touchmove mousemove", mousemove);
  svg.on("touchend mouseleave", mouseout);
  
  // helper function for locating the nearest point in the data
  // corresponding to the mouse position
  // https://github.com/d3/d3-array#bisector
  const bisectDate = d3.bisector(d => d.date).left;
  
  function mousemove() {
    // get date corresponding to mouse x position
    const date = x.invert(d3.mouse(this)[0]);
    
    // get data
    const index = bisectDate(rawData, date, 1);
    // document.querySelector(".debug").innerText = JSON.stringify(index);
    const datapoint = rawData[index];
    
    // display date
    d3.select('#tt-date').text(datapoint.Week);
    
    // add rollover data rows, clearing old ones first
    ttrows.selectAll('td').remove();
    
    ttrows.each(function (d) {
      d3.select(this).append('td').text(d);
      d3.select(this).append('td')
        .text(datapoint[d])
        .style("color", d => color(d));
    });
    
    // display rollover
    d3.select('#tooltip')
      .style("left", x(datapoint.date) + "px")
      .style("top", width/2 + "px")
      .classed('hidden', false);
  }
  
  function mouseout() {
    d3.select('#tooltip')
      .classed('hidden', true);
  }
}

d3.csv(URL, d3.autoType)
  .then(function (data) {
    data.forEach(el => {
      el.date = new Date(el.Week)
    });
    return data;
})
  .then(createChart);