/* prettier-ignore */
d3.select('body')
  .append('canvas')
  .attr('width', 960)
  .attr('height', 500);

const canvas = d3.select('canvas');
const context = canvas.node().getContext('2d');
const width = canvas.property('width');
const height = canvas.property('height');

const circles = [{ x: 50, y: 60, radius: 10 }, { x: 100, y: 80, radius: 10 }];
const rects = [{ x: 10, y: 10, x2: 210, y2: 210 }];
const radius = 10;

//
// setup force simulation
//

const graph = {
  nodes: [
    { id: 0, size: 10 },
    { id: 1, size: 5 },
    { id: 2, size: 2 },
    { id: 3, size: 3 },
    { id: 4, size: 30 },
    { id: 5, size: 40 }
  ],
  links: [
    { source: 0, target: 1 },
    { source: 0, target: 2 },
    { source: 1, target: 0 },
    { source: 3, target: 0 },
    { source: 4, target: 1 }
  ]
};

const simulation = d3
  .forceSimulation()
  .force('link', d3.forceLink().id(d => d.id))
  .force('charge', d3.forceManyBody())
  .force('center', d3.forceCenter(width / 2, height / 2));

simulation.nodes(graph.nodes).on('tick', ticked);

function ticked() {
  render();
}

//
//
//

render();

canvas.call(
  d3
    .drag()
    .subject(dragSubject)
    .on('start', dragStarted)
    .on('drag', dragged)
    .on('end', dragEnded)
    .on('start.render drag.render end.render', render)
);

function render() {
  context.clearRect(0, 0, width, height);
  // draw the black rectangle
  rects.forEach(rect => {
    context.fillStyle = 'black';
    context.clearRect(0, 0, width, height);
    context.fillRect(rect.x, rect.y, rect.x2, rect.y2);

    // draw a line for each link
    context.strokeStyle = '#aaa';
    context.lineWidth = 1;
    context.beginPath();
    graph.links.forEach(link => {
      context.moveTo(
        graph.nodes[link.source].x + rect.x,
        graph.nodes[link.source].y + rect.y
      );
      context.lineTo(
        graph.nodes[link.target].x + rect.x,
        graph.nodes[link.target].y + rect.y
      );
    });
    context.stroke();

    // draw a circle for each node
    context.beginPath();
    graph.nodes.forEach(node => {
      context.moveTo(node.x + rect.x + radius, node.y + rect.y);
      context.arc(node.x + rect.x, node.y + rect.y, radius, 0, 2 * Math.PI);
    });
    context.fillStyle = 'red';
    context.fill();
  });
}

function dragSubject() {
  let i;
  const n = graph.nodes.length;
  let dx;
  let dy;
  let d2;
  let s2 = radius * radius * 4;
  let node;
  let subject;

  for (i = 0; i < n; i += 1) {
    node = graph.nodes[i];
    console.log('node from dragSubject', node);
    dx = d3.event.x - node.x - rects[0].x;
    dy = d3.event.y - node.y - rects[0].y;
    d2 = dx * dx + dy * dy;

    console.log('dx', dx);
    console.log('dy', dy);
    console.log('d2', d2);
    console.log('s2', s2);

    if (d2 < s2) {
      subject = node;
      s2 = d2;
    } else if (typeof subject === 'undefined') {
      rect = rects[0];
      subject = rect;
    }
  }
  return subject;
}

function dragStarted() {
  // if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  // circles.splice(circles.indexOf(d3.event.subject), 1);
  // circles.push(d3.event.subject);
  d3.event.subject.active = true;
}

function dragged() {
  d3.event.subject.x = d3.event.x;
  d3.event.subject.y = d3.event.y;
}

function dragEnded() {
  d3.event.subject.active = false;
}