window.helpers = {}

helpers.drawDot = function drawDot(ctx, point, size) {
  var fill = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '#ccc';
  var stroke = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : '#ccc';

  ctx.fillStyle = fill;
  ctx.strokeStyle = stroke;
  ctx.lineWidth = 0.2;
  ctx.beginPath();
  ctx.arc(point.x, point.y, size, 0, Math.PI * 2, false);
  // var p = new window.Path2D('M10 10 h 80 v 80 h -80 Z')
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}

helpers.drawLine = function drawLine(ctx, start, end, controlPt, color) {
  var lineWidth = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0.2;

  ctx.moveTo(start.x, start.y);
  ctx.quadraticCurveTo(controlPt.x, controlPt.y, end.x, end.y); // curved lines
  // ctx.lineTo(end.x, end.y) // straight lines
  ctx.lineJoin = 'round';
  ctx.lineCap = 'round';
  ctx.strokeStyle = color;
  ctx.lineWidth = lineWidth;
  ctx.stroke();
}

helpers.generatePointsFromMap = function generatePointsFromMap(map, routes, projection) {
  var points = [];
  routes.forEach(function (route, idx) {
    var origin = map[route[0]];
    var dest = map[route[1]];
    if (origin && dest && origin.length && dest.length) {
      var startXY = projection(origin) || [0, 0];
      var endXY = projection(dest) || [0, 0];
      var start = { x: startXY[0], y: startXY[1] };
      var end = { x: endXY[0], y: endXY[1] };
      var name = route;
      var onMap = end.x > 0 && start.x > 0;
      if (onMap) {
        points.push({ idx: idx, name: name, start: start, end: end, progress: 0 });
      }
    }
  });
  console.log('points:', points.length)
  return points;
}

helpers.getWaypointXY = function getWaypointXY(startPoint, endPoint, percent) {
  var factor = percent / 100;
  var x = startPoint.x + (endPoint.x - startPoint.x) * factor;
  var y = startPoint.y + (endPoint.y - startPoint.y) * factor;
  return { x: x, y: y };
}

// quadratic bezier: percent is 0-1
helpers.getQuadraticBezierXY = function getQuadraticBezierXY(startPt, controlPt, endPt, percent) {
  var x = Math.pow(1 - percent, 2) * startPt.x + 2 * (1 - percent) * percent * controlPt.x + Math.pow(percent, 2) * endPt.x;
  var y = Math.pow(1 - percent, 2) * startPt.y + 2 * (1 - percent) * percent * controlPt.y + Math.pow(percent, 2) * endPt.y;
  return { x: x, y: y };
}