const margin = {top: 20, right: 20, bottom: 20, left: 30},
      width = 700 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
const numSpecies = 200;

const xScale = d3.scaleLinear()
  .domain([0, numSpecies])
  .range([0, width]);
const yScale = d3.scaleLinear()
  .domain([0, 1])
  .range([0, height]);

let speciesData;
let speciesByFitness;

const svg = d3.select('svg')
              .attr('width', width)
              .attr('height', height)
              .append("g")
              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append("g")
  .call(d3.axisLeft(yScale.copy().domain([1,0])))
  .append("text")
  .attr("fill", "#000")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", "0.71em")
  .attr("text-anchor", "end")
  .text("Fitness");

const setData = () => {
  speciesData = d3.range(numSpecies)
    .map((i) => ({
      x: xScale(i),
      fitness: Math.random()
    }));

  speciesData.forEach((s, i) => {
    s.neighbors = _.without([speciesData[i-1], speciesData[i+1]], undefined);
  });

  speciesByFitness = _.sortBy(speciesData, 'fitness');

  opts['Low Threshold'] = speciesByFitness[0].fitness.toFixed(2);
  opts['Avg Fitness'] = _.sumBy(speciesData, 'fitness') / speciesData.length;
};

let statsAdded = false;
const updateGraphics = (data) => {
  const species = svg.selectAll(".species")
    .data(data);

  const speciesWidth = Math.max(1, (width / numSpecies) - 1);

  species.enter().append('rect')
         .attr('class', 'species')
         .attr('x', (d) => d.x)
         .attr('width', speciesWidth)
       .merge(species)
         .attr('y', (d) => height - yScale(d.fitness))
         .attr('height', (d) => yScale(d.fitness));

  species.exit().remove();

  if (!statsAdded) {
    GUI.add(opts, 'Avg Fitness').listen();
    GUI.add(opts, 'Low Threshold').listen();
    statsAdded = true;
  }
}

const mutateFitness = (n) => {
  n.fitness = Math.random();
};

const start = () => {
  let bestWorst = 0;

  return d3.interval((elapsed) => {
    speciesByFitness = _.sortBy(speciesByFitness, 'fitness');

    const worst = speciesByFitness[0];

    if (worst.fitness > bestWorst) {
      bestWorst = worst.fitness;
      opts['Low Threshold'] = bestWorst.toFixed(2);
    }

    opts['Avg Fitness'] = _.sumBy(speciesData, 'fitness') / speciesData.length;

    _.concat(worst, worst.neighbors).forEach(mutateFitness);

    updateGraphics(speciesData);
  }, 15);
};

let timer;
const opts = {
  'start/stop': () => {
    if (timer) {
      timer.stop();
      timer = undefined;
    } else {
      timer = start();
    }
  },
  reset: () => {
    if (timer) {
      timer.stop();
      timer = undefined;
    }
    setData();
    updateGraphics(speciesData);
  },
  'Avg Fitness': 0,
  'Low Threshold': 0
};

let GUI = new dat.GUI();
GUI.add(opts, 'start/stop');
GUI.add(opts, 'reset');

setData();
updateGraphics(speciesData);