import './lib/d3.v7.min.js';

let POINTS = [];

const x = d3.scaleLinear([0, 350]);
const y = d3.scaleLinear([0, 120]).nice(30);

// Declare the line generator.
const line = d3.line()
  .x((d, i) => x(i))
  .y((d, i) => y(d));

const margin = 40;

const svg = d3.select('#plot');

// Add the x-axis.
const xa = svg.append('g');

// Add the y-axis.
const ya = svg.append('g');

// add the plot.
const plot = svg.append('path')
  .attr('fill', 'none')
  .attr('stroke', 'black')
  .attr('stroke-width', '2');

const sec = d3.format('02');
const min = d3.format(' ');
const minsec = v => `${min(Math.floor(v / 60))}:${sec(v % 60)}`;

const update = () => {
  x.domain([0, Math.max(POINTS.length, 120)]).nice(30);
  y.domain(d3.extent([...d3.extent(POINTS), 0, 350]));

  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
  ya.transition().call(d3.axisLeft(y))
  plot.transition().attr('d', line(POINTS));
};

export const clear = () => {
  POINTS = [];
  update();
};

export const addPoint = (temp) => {
  POINTS.push(temp);
  update();
};

const onresize = () => {
  const width = svg.node().clientWidth;
  const height = svg.node().clientHeight;
  svg
    .attr('width', width)
    .attr('height', height);

  x.range([margin, width-2*margin]);
  y.range([height-2*margin, margin]);
  xa.transition().call(d3.axisBottom(x).tickFormat(minsec))
  ya.transition().call(d3.axisLeft(y))
  plot.transition().attr('d', line(POINTS));

  xa.attr('transform', `translate(0, ${height - 2*margin})`);
  ya.attr('transform', `translate(${margin}, 0)`);
};
window.addEventListener('resize', onresize);

onresize();
update();