// setting the current position of mouse to variable
let container = document.getElementById("mouse-rect");
let mouseXY = mouse(container);

// using corresponding x-value to draw a new vertical path
select(".mouse-line").attr("d", () => {
  let d = "M" + mouseXY[0] + "," + innerHeight;
  d += " " + mouseXY[0] + "," + 0;
  return d;
}); 

// when [i] specifies the orange line
if (lines[i].getAttribute("class") === "coverage-path") {
  select(this)
    .select(".moving-label")
    // adding text translation of dependent variable based on mouse position (pos)
    .text(`${y2Scale.invert(pos.y).toFixed(2)}%`);
}

// when [i] specifies the blue line
if (lines[i].getAttribute("class") === "incidence-path") {
  select(this)
    .select(".moving-label")
    // adding text translation of dependent variable based on mouse position (pos)
    .text(y1Scale.invert(pos.y).toFixed(0));
}

function loadIncidence(countryIdx) {
  return new Promise(resolve => {
    csv("./data/polio_incidence.csv").then(data => {
      const dataArr = [];

      const columns = Object.keys(data[countryIdx]);
      const years = columns
        .map(colHeader => {
          if (+colHeader) return +colHeader;
        })
        .filter(header => typeof header === "number");

      // creating object (one for each year) which will eventually be interpreted by D3 functions
      years.forEach(y => {
        const obj = {};
        obj.year = y;
        // here, the first dependent variable is loaded into the each object
        obj.incidence = +data[countryIdx][y];
        dataArr.push(obj);
      });

      resolve(dataArr);
    });
  });
}

// (loadCoverage is chained to the Promise returned by the above loadIncidence)
function loadCoverage(countryIdx, dataArr) {
  return new Promise(resolve => {
    csv("./data/polio_coverage_estimates.csv").then(data => {
      dataArr.forEach(obj => {
        // here, the second dependent variable is added to each object
        obj.coverage = +data[countryIdx][obj.year];
      });

      // now, we send the entire array of objects to our D3 SVG-drawing functions
      resolve(dataArr);
    });
  });
}