/* 
  The seed() function creates a number
  of DataNode instances that simulate
  an SQL data structure. The DataNode
  class also provides methods to
  determine each node's number of
  direct predecessors and entire progeny.
*/

class DataNode {
  constructor(args){
    this.id = DataNode.count();
    this.parentId = args.parentId;
    DataNode.instances.push(this);
  }
  get children(){
    return DataNode.instances.filter(node => node.parentId === this.id);
  }
  get siblings(){
    return DataNode.instances.filter(node => node.parentId === this.parentId);
  }
  get parent(){
    return DataNode.instances.find(node => node.id === this.parentId);
  }
  // count predecessors by recursively backtracking to the root ancestor
  get predecessors(){
    function countAncestors(node, count){
      return node.parent ? countAncestors(node.parent, count+1) : count;
    }
    return countAncestors(this, 0);
  }
  // recursively find the number of children to get entire progeny
  get progeny(){
    function countChildren(node){
      if (node.children.length < 0){
        return 0;
      } else {
        return node.children.reduce((a,b) => {
          return a + countChildren(b);
        }, node.children.length);
      }
    }
    return countChildren(this);
  }

}
DataNode.maxChildren = 4;
DataNode.maxGenerationSize = 8;
DataNode.reset = function(){
  DataNode.instances = [];
}
DataNode.count = function() { return DataNode.instances.length; }
DataNode.find = function(id) {
  return DataNode.instances.find(node => id === node.id);
}
DataNode.format = function() {
  const output = { id: DataNode.instances[0].id }
  fill(output);
  return output;
  function fill(parent){
    parent.children = DataNode.find(parent.id).children.map(node => ({ id: node.id }))
    parent.children.forEach(child => fill(child));
  }
}

const state = {
  loading: false
}

function seed(n){
  // reset DataNodes
  DataNode.reset();
  DataNode.maxPredecessors = 0;
  // get DOM elements
  const progress = document.getElementById('progress');
  // create root node
  new DataNode({id: 0, parentId: null});
  // instantiate working variables
  const whitelist = [0];
  const generations = [1];
  const cd = 90,
        roundTime = 10;
  var progressTimer = cd,
      i = 1;
  const interval = setInterval(seedRound, roundTime);
  // seed round interval function
  function seedRound(){
    generateSeed(i);
    // update progress;
    if (progressTimer <= 0) {
      progressTimer = cd;
      tickProgress(i,n);
    }
    // increment iterator and timer
    i++;
    progressTimer -= roundTime;
    if (i > n) {
      clearInterval(interval);
      generateComplete();
    }
  }
  // each round of seeding
  function generateSeed(i){
    // choose parent from all instances filtered by blacklist
    const parentId = chooseParent();
    const newNode = new DataNode({ parentId });
    // add new node to whitelist for faster seeding computation
    whitelist.push(newNode.id);
    // update maxPredecessors in class object
    if (newNode.predecessors > DataNode.maxPredecessors) {
      DataNode.maxPredecessors = newNode.predecessors;
    }
  }
  // choose random parent with requirements:
  // 1) next generation after parent cannot exceed maxGenerationSize
  // 2) parent cannot have more than maxChildren
  // bad parents are added to blacklist during seed
  function chooseParent(){
    const rand = whitelist.length > 1 ? Math.floor(Math.random()*whitelist.length) : 0;
    const parentId = whitelist[rand];
    const parent = DataNode.find(parentId);
    const genLvl = parent.predecessors + 1;
    if (
      generations[genLvl] >= DataNode.maxGenerationSize
      || parent.children.length >= DataNode.maxChildren
    ) {
      whitelist.splice(rand, 1);
      return chooseParent();
    } else {
      generations[genLvl] = generations[genLvl] ? generations[genLvl] + 1 : 1;
      return parentId;
    }
  }
  function tickProgress(i,m){
    progress.innerHTML = Math.round((i/m)*100);
  }
}

function renderGraphic(data){
  const width = window.innerWidth*0.8;
  const height = DataNode.maxPredecessors * 120;
  const nodeSize = 24;
  
  const root = d3.hierarchy(data);
  const treeLayout = d3.tree().size([width, height]);
  treeLayout(root);
  
  d3.selectAll('svg > *').remove();
  const svg = d3.select('#root')
    .attr('width', width)
    .attr('height', height)
  
  const links = svg.append('g')
    .attr('id', 'links')
    .selectAll('line')
    .data(root.links())
    .enter()
  
  links.append('path')
    .classed('link', true)
    .attr('d', d => makeBezierPath(d));
  
  const nodes = svg.append('g')
    .attr('id', 'nodes')
    .selectAll('.node-group')
    .data(root.descendants())
    .enter()
    .append('g')
    .classed('node-group', true);
  nodes.append('circle')
    .classed('node', true)
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('r', nodeSize)
    .on('mouseover click', function(d) {
      console.log('mouse/click')
      // get DataNode
      const node = DataNode.find(d.data.id);
      growNode(d3.select(this));
      // id
      document.getElementById('id').innerHTML = d.data.id;
      // predecessors
      const maxPred = DataNode.maxPredecessors;
      const currentPred = node.predecessors;
      const predecessors = document.getElementById('predecessors');
      predecessors.innerHTML = currentPred;
      predecessors.style.color = percentColor(currentPred, maxPred);
      // progeny
      const currentProg = node.progeny;
      const maxProg = DataNode.find(0).progeny;
      const progeny = document.getElementById('progeny');
      progeny.innerHTML = currentProg;
      progeny.style.color = percentColor(currentProg, maxProg);
    })
    .on('mouseleave blur', function(d) {
      console.log('leave/blur')
      const node = d3.select(this);
      if (node.attr('r') !== nodeSize) revertNode(node);
    })
  nodes.append('text')
    .classed('text', true)
    .attr('x', d => d.x)
    .attr('y', d => d.y)
    .text(d => d.data.id === 0 ? 'root' : d.data.id);
  
  //render helpers
  function growNode(el){
    el.transition()
      .attr('r', nodeSize*1.2)
      .duration(100)
      .delay(0)
      .ease(d3.easeBounce);
  }
  function revertNode(el){
    el.attr('r', nodeSize)
  }
}

function percentColor(val, max){
  return `hsl(${256*(val/max)},80%,70%)`;
}

function makeBezierPath(d){
  const dy = (d.target.y - d.source.y) * 0.8;
  return `M ${d.source.x} ${d.source.y} ` + 
         `C ${d.source.x} ${d.source.y+dy}, ` +
         `${d.target.x} ${d.target.y-dy}, ` +
         `${d.target.x} ${d.target.y}`
}

function generate(){
  document.getElementById('id').innerHTML = '-';
  document.getElementById('predecessors').innerHTML = '-';
  document.getElementById('progeny').innerHTML = '-';
  loading(true);
  const input = document.getElementById('seed-number');
  const value = input.value < 10 ? 10 : input.value > 400 ? 400 : input.value;
  input.value = value;
  seed(value);
}
function generateComplete(){
  loading(false);
  renderGraphic(DataNode.format());
}

function loading(status){
  state.loading = status;
  document.getElementById('loader').style.display = status ? 'flex' : 'none';
}

document.getElementById('reset').onclick = generate;
window.addEventListener('keydown', keydownHandler);
window.addEventListener('keyup', keyupHandler)

function keydownHandler(e){
  if (!state.loading){
    const input = document.getElementById('seed-number');
    if (e.shiftKey) document.getElementById('kshift').setAttribute('style', 'background-color:#f0f0f0;');
    switch(e.keyCode){
      case 13:
        state.keypressEnter = true;
        Object.assign(document.getElementById('reset').style, {
          color: 'black',
          backgroundColor: 'white',
        });
        break;
      case 187:
      case 189:
        document.getElementById('k' + e.keyCode).setAttribute('style', 'background-color:#f0f0f0;');
        var x = e.shiftKey ? -10 : -1;
        input.value = bound(parseInt(input.value, 10) + (e.keyCode-188)*x);
      default:
    }
    function bound(n){
      return n < 10 ? 10 : n > 400 ? 400 : n;
    }
  }
}
function keyupHandler(e){
  if (!e.shiftKey) document.getElementById('kshift').setAttribute('style', '');
  switch(e.keyCode){
    case 13:
      Object.assign(document.getElementById('reset').style, {
        color: 'white',
        backgroundColor: 'transparent',
      });
      if (state.keypressEnter) {
        state.keypressEnter = false;
        generate();
      }
      break;
    case 187:
    case 189:
      document.getElementById('k' + e.keyCode).setAttribute('style', '');
    default:
  }
}

generate();