const root = document.querySelector(':root');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const div = document.querySelector('div');
const showCssAnimation = document.querySelector('#show-css-animation');

const pointRadius = 5;
let dragging = 'none';

function getVars() {
  const rootStyle = window.getComputedStyle(root);
  const vars = {};
  for (let i = 0; i < 4; ++i) {
    for (const xy of ['x', 'y']) {
      const varName = 'p' + i.toString() + xy;
      vars[varName] = parseInt(rootStyle.getPropertyValue('--' + varName));
    }
  }
  vars.progress =  parseInt(window.getComputedStyle(div).getPropertyValue('z-index')) / 1000;
  return vars;
}

function drawPoint(x, y, fillStyle) {
 ctx.save();
 ctx.fillStyle = fillStyle;
 ctx.beginPath();
 ctx.arc(x, y, pointRadius, 0, 2 * Math.PI);
 ctx.fill();
 ctx.restore();
}

function drawControlPoint(x, y) {
 ctx.save();
 ctx.strokeStyle = 'black';
 ctx.lineWidth = 2;
 ctx.fillStyle = 'white';
 ctx.beginPath();
 ctx.rect(x - pointRadius, y - pointRadius, pointRadius * 2, pointRadius * 2);
 ctx.stroke();
 ctx.fill();
 ctx.restore();
}

function drawLine(x1, y1, x2, y2, strokeStyle) {
 ctx.save();
 ctx.strokeStyle = strokeStyle;
 ctx.beginPath();
 ctx.moveTo(x1, y1);
 ctx.lineTo(x2, y2);
 ctx.stroke();
 ctx.restore();
}

function drawBezier(vars) {
 ctx.save();
 ctx.strokeStyle = 'red';
 ctx.lineWidth = 2;
 ctx.beginPath();
 ctx.moveTo(vars.p0x, vars.p0y);
 ctx.bezierCurveTo(vars.p1x, vars.p1y, vars.p2x, vars.p2y, vars.p3x, vars.p3y);
 ctx.stroke();
 ctx.restore();
}

function linearInterpolation(v1, v2, p) {
  return (1 - p) * v1 + p * v2;
}

function redraw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  const vars = getVars(); 
  
  const q1x = 3 * vars.p1x - 3 * vars.p2x + vars.p3x;
  const q1y = 3 * vars.p1y - 3 * vars.p2y + vars.p3y;
  const q2x = 3 * vars.p2x - 2 * vars.p3x;
  const q2y = 3 * vars.p2y - 2 * vars.p3y;
  
  const m1x = linearInterpolation(vars.p0x, q1x, vars.progress);
  const m1y = linearInterpolation(vars.p0y, q1y, vars.progress);
  const m2x = linearInterpolation(m1x, q2x, vars.progress);
  const m2y = linearInterpolation(m1y, q2y, vars.progress);
  const m3x = linearInterpolation(m2x, vars.p3x, vars.progress);
  const m3y = linearInterpolation(m2y, vars.p3y, vars.progress);
  
  drawLine(vars.p0x, vars.p0y, vars.p1x, vars.p1y, '#777');
  drawLine(vars.p2x, vars.p2y, vars.p3x, vars.p3y, '#777');
  
    
  if (showCssAnimation.checked) {
    drawLine(vars.p0x, vars.p0y, q1x, q1y, '#00f');
    drawLine(m1x, m1y, q2x, q2y, '#00f');
    drawLine(m2x, m2y, vars.p3x, vars.p3y, '#00f');
    
    drawPoint(q1x, q1y, '#777');
    drawPoint(q2x, q2y, '#777');   
    drawPoint(m1x, m1y, 'blue');
    drawPoint(m2x, m2y, 'blue');
  }
  
  drawBezier(vars);
  drawPoint(vars.p0x, vars.p0y, 'black');
  drawPoint(vars.p3x, vars.p3y, 'black');
  drawControlPoint(vars.p1x, vars.p1y);
  drawControlPoint(vars.p2x, vars.p2y);
  
  window.requestAnimationFrame(redraw);
}

redraw();

function getMousePositionWithinCanvas(e) {
  const rect = canvas.getBoundingClientRect();
  return [e.clientX - rect.left, e.clientY - rect.top];
}

function canDrag(x, y, x1, y1) {
  return Math.max(Math.abs(x - x1), Math.abs(y - y1)) < pointRadius;
}

canvas.addEventListener('mousedown', (e) => {
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  
  dragging = 'none';
  const vars = getVars();
  for(let i = 0; i < 4; ++i) {
    const pName = 'p' + i.toString();
    if (canDrag(mouseX, mouseY, vars[pName + 'x'], vars[pName + 'y'])) {
      dragging = pName;
      break;
    }
  }
});

canvas.addEventListener('mouseup', (e) => {
  dragging = 'none';
});

canvas.addEventListener('mousemove', (e) => {
  if (dragging === 'none') {
    return;
  }
  
  const [mouseX, mouseY] = getMousePositionWithinCanvas(e);
  root.style.setProperty('--' + dragging + 'x', mouseX);
  root.style.setProperty('--' + dragging + 'y', mouseY);
});