/**
 * analyse the data and vis(?)
 * basic idea is that events would drop out of the corners
 */


var eventTypes = [
  'WatchEvent',
  'IssueCommentEvent',
  'IssuesEvent',
  'PushEvent',
  'ForkEvent',
  'ReleaseEvent',
  'CreateEvent',
  'PullRequestEvent' ];

// var colorScale = d3.scaleOrdinal(d3.schemeAccent).domain(eventTypes);
var colorScale = d3.scaleOrdinal().range(d3.schemeAccent).domain(eventTypes);
//centers: repo, issues, comments, watchers, prs, forks
//repo in center, new issue/comment/watcher come in from the corner and

var width = 700;
var height = 600;
var radius = 3
var foci = [
  {id: 'repo', x: width * 0.5, y:height * 0.5},
  {id: 'WatchEvent', x: width/5 , y:height- 30},
  {id: 'IssueCommentEvent', x: width/5 *2, y:height - 30},
  {id: 'IssuesEvent', x: width/5 * 3, y:height - 30},
  {id: 'PullRequestEvent', x: width/5 * 4, y:height - 30}
];

var titleArr = foci.map(d => {return {
  title: d.id,
  x: d.x,
  y: height - 10
}});

var nodes = [{
  forceCenter: [0.5 * width, 0.5 * height],
  x: 0.5 * width,
  y: 0.5 * height,
  radius: 20,
  color : colorScale('ReleaseEvent')
}];

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    tau = 2 * Math.PI;
    context.canvas.width = width;
    context.canvas.height = height;

var simulation = d3.forceSimulation()
    .drag(0.2)
    .alphaDecay(0.7)
    .force("x", d3.forceX().x(d => d.forceCenter[0]).strength(0.2))
    .force("y", d3.forceY().y(d => d.forceCenter[1]).strength(0.2))
    .force("collide", d3.forceCollide().radius(d => d.radius + 1.5).iterations(1));
simulation.on('end', () => {console.log('end')})

function ticked() {

  context.clearRect(0, 0, width, height);
  context.save();

  //for the repo
  // context.beginPath();
  // context.moveTo(0.5 * width + 10, 0.5 * height);
  // context.arc(0.5 * width, 0.5 * height, 10, 0, tau);
  // context.fillStyle = "red";
  // context.fill();
  // context.strokeStyle = "red";
  // context.stroke();

  let toSpliceIndex = [];

  nodes.forEach(function(d, i) {

    if(d.type == "PushEvent" && d.x < (0.5 * width + 35) && d.x > 0.5 * width -35
        && d.y < (0.5 * height + 35) && d.y > (0.5 * height -35)) {
      toSpliceIndex.push(i)
      nodes[0].color = "red";
      nodes[0].radius = 40;
    }

    if(d.type == "ReleaseEvent" && d.x < (0.5 * width + 35) && d.x > 0.5 * width -35
        && d.y < (0.5 * height + 35) && d.y > (0.5 * height -35)) {
      toSpliceIndex.push(i)
      nodes[0].color = "red";
      nodes[0].radius = 90;
    }
  });
  toSpliceIndex.forEach(i => nodes.splice(i,1));

  nodes.forEach(function(d, i) {
    context.beginPath();
    context.moveTo(d.x + d.radius, d.y);
    context.arc(d.x, d.y, d.radius, 0, tau);
    context.fillStyle = d.color;
    context.fill();
    context.strokeStyle = d.color;
    context.stroke();
  });

  nodes[0].color = colorScale('ReleaseEvent');
  nodes[0].radius = 20;


  context.restore();

  drawTtitle(titleArr);
}


function reheatSimulation(simulation) {
  simulation.alphaTarget(0).alpha(1);
  simulation.restart();
}

function drawTtitle(titleArr) {
  context.save();
  context.fillStyle = "black";
  titleArr.forEach(d => {
    context.fillText(d.title, d.x, d.y)
  });
  context.restore();
}

d3.json('d3Activity.json', (err, activities) => {
  var sortedActivites = activities.sort(
      (a, b) => {
        if ((new Date(a.created_at)).getTime() > (new Date(b.created_at)).getTime()) {
          return 1;
        }
        if ((new Date(a.created_at)).getTime() < (new Date(b.created_at)).getTime()) {
          return -1;
        }
        return 0;
      }
  );
  console.log(sortedActivites.filter(d => d.type == "PushEvent"))
  sortedActivites.forEach(d => {
    let type = d.type;
    let focus = foci.filter(j => j.id == type)[0];
    if(!focus) {
      focus = foci[0];
    }
    d.forceCenter = [focus.x, focus.y];
    d.x = Math.random() * width;
    d.y = 10;
    d.radius = 3;
    d.color = colorScale(type);
  });

  // var nodes = [{
  //   forceCenter: [0.5 * width, 0.5 * height],
  //   x: 0.5 * width,
  //   y: 0.5 * height,
  //   radius: 20,
  //   color : colorScale('ReleaseEvent')
  // }];
  simulation.on('tick', () => {ticked(nodes)});
  for(let i = 0; i < sortedActivites.length; i++) {
    setTimeout(() => {
      nodes.push(sortedActivites[i]);
      // console.log(nodes)
      simulation.nodes(nodes);
      simulation.fix(nodes[0]);
      reheatSimulation(simulation)
    }, i * 90);
  }
});