class App {
  constructor(div) {
    this.div = div;
    this.canvas = document.getElementById("canvas");
    this.ctx = canvas.getContext('2d');
    this.dirty = true;
    this.prev = +new Date();
    this.prevPos = [0, 0];
    
    this.resize();
    
    window.addEventListener('resize', () => this.resize(), false);
    
    this.canvas.addEventListener("mousedown", (event) => {
      this.prevPos = App.getmousePos(event)
      this.touchdown(...this.prevPos);
      event.preventDefault();
    }); 
    this.canvas.addEventListener("mousemove", (event) => {
      let curPos = App.getmousePos(event);
      this.touchmove(...curPos, curPos[0]-this.prevPos[0], curPos[1]-this.prevPos[1]);
      this.prevPos = curPos;
      event.preventDefault();
    });
    this.canvas.addEventListener("mouseup", (event) => {
      this.touchup(...App.getmousePos(event));
      event.preventDefault();
    });
    this.canvas.addEventListener("touchstart", (event) => {
      this.prevPos = App.getmousePos(event)
      this.touchdown(...this.prevPos);
      event.preventDefault();
    });
    this.canvas.addEventListener("touchmove", (event) => {
      let curPos = App.getmousePos(event);
      this.touchmove(...curPos, curPos[0]-this.prevPos[0], curPos[1]-this.prevPos[1]);
      this.prevPos = curPos;
      event.preventDefault();
    });
    this.canvas.addEventListener("touchend", (event) => {
      this.touchup(...App.getmousePos(event));
      event.preventDefault();
    });
  }
  
  resize() {
    this.canvas.width  = this.div.clientWidth;
    this.canvas.height = this.div.clientHeight;
    this.dirty = true;
  }
  
  loop() {
    let now = +new Date();
    let dt = now - this.prev;
    this.prev = now;
    this.update(dt/1000)
    if (this.dirty)
      this.draw(this.ctx);
    window.requestAnimationFrame(() => this.loop());
  }
  
  update(dt) {}
  
  draw(ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.rect(0, 0, 100, 100);
    ctx.fill();
  }
  
  touchdown(x, y) { console.log("down", x, y); }

  touchmove(x, y) {}

  touchup(x, y) {}

  static getmousePos(event) {
    if (event.changedTouches) {
        return [event.changedTouches[0].pageX, event.changedTouches[0].pageY];
    }
    else {
        var rect = event.target.getBoundingClientRect();
        return [event.clientX- rect.left, event.clientY - rect.top];
    }
  }
}

function pointInCircle(x, y, cx, cy, r) {
  let [vx, vy] = [x - cx, y - cy];
  return vx*vx+vy*vy < r*r;
}
  
function pointOnLine(x, y, p1x, p1y, p2x, p2y) {
  let [v1x, v1y] = [x   - p1x,   y - p1y];
  let [v2x, v2y] = [p2x - p1x, p2y - p1y];
  // Get scalar projection
  let t = (v1x * v2x + v1y * v2y) / (v2x * v2x + v2y * v2y);
  // Check if within boundaries
  if (t < 0 || t > 1)
    return false;
  // Calculate the projected point
  let [px, py] = [p1x + t * v2x, p1y + t * v2y];
  // Calculate position and check if close enough
  return pointInCircle(x, y, px, py, 5) ? [px, py] : false;
}
  
function pointInPolygon(x, y, points) {
  let [x1, y1] = [points[points.length-2], points[points.length-1]];
  let [x2, y2] = [points[0], points[1]];
  let inside = false;
  // For every edge, check for an intersection
  for (let i = 0; i < points.length; i+=2) {
    if (((y1 >= y) != (y2 >= y)) && (x < (x2 - x1) * (y - y1) / (y2 - y1) + x1)) {
      inside = !inside;
    }
    [x1, y1] = [x2, y2];
    [x2, y2] = [points[i+2], points[i+3]];
  }
  return inside;
}

function projectPolygon(points, x, y, nx, ny) {
  let min = (points[0]-x)*nx+(points[1]-y)*ny;
  let max = min;
  let s;
  for (let i = 2; i < points.length; i+=2) {
    s = (points[i]-x)*nx+(points[i+1]-y)*ny;
    if (s < min) min = s;
    if (s > max) max = s;
  }
  return [min, max];
}

function polygonCollidesWith(points1, points2) {
  // We project both polygons on all normals of polygon 1
  let [x1, y1] = [points1[points1.length-2], points1[points1.length-1]];
  let [x2, y2] = [points1[0], points1[1]];
  let nx, ny, min1, max1, min2, max2;
  // For every edge of points1
  for (let i = 0; i < points1.length; i+=2) {
    // Get edge normal by rotating the vector [x2-x1, y2-y1] by 90 degrees
    [nx, ny] = [y2-y1, x1-x2];
    // Project both polygons onto the normal
    [min1, max1] = projectPolygon(points1, x2, y1, nx, ny);
    [min2, max2] = projectPolygon(points2, x2, y1, nx, ny);
    // If there is no overlap between the ranges, there is no collision
    if (max1 <= min2 || min1 >= max2)
      return false;
    [x1, y1] = [x2, y2];
    [x2, y2] = [points1[i+2], points1[i+3]];
  }
  return true;
}

function polygonsCollide(points1, points2) {
  return polygonCollidesWith(points1, points2) && polygonCollidesWith(points2, points1);
}

class GameApp extends App {
  constructor(div) {
    super(div);
    let [cx, cy] = [canvas.width*0.5, canvas.height*0.5];
    this.polygons = [[cx, cy-120, cx+120, cy, cx, cy+120, cx-120, cy],
                     [cx-120, cy-120, cx+120, cy-120, cx+120, cy+120, cx-120, cy+120]];
    this.grab = false;
    this.loop();
  }
  
  update(dt) {
    
  }
  
  draw(ctx) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Polygons
    ctx.strokeStyle = "blue";
    for (let points of this.polygons) {
      ctx.beginPath();
      ctx.moveTo(points[0], points[1]);
      for (let i=2; i < points.length; i+=2)
        ctx.lineTo(points[i], points[i+1]);
      ctx.closePath();
      ctx.stroke();
    }
    
    // Vertices
    ctx.fillStyle = "blue";
    for (let points of this.polygons) {
      for (let i=0; i < points.length; i+=2) {
        ctx.beginPath();
        ctx.arc(points[i], points[i+1], 5, 0, 2 * Math.PI, false);
        ctx.fill();
      }
    }
    
    ctx.fillStyle = "black";
    ctx.fillText(polygonsCollide(this.polygons[0], this.polygons[1]) ?
                 "Colliding" : "Not colliding", 10, 10);
    
    const url = "www.fromatogra.com";
    ctx.fillText(url, (canvas.width-ctx.measureText(url).width)*0.5, 10);
    
    this.dirty = false;
  }
  
  touchdown(x, y) {
    this.grab = true;
    for (let points of this.polygons) {
      for (let i=0; i < points.length; i+=2) {
        if (pointInCircle(x, y, points[i], points[i+1], 25)) {
          this.grabInfo = [points, "vertex", i];
          return;
        }
      }
    }
    for (let points of this.polygons) {
      let segment = points.length-2;
      let intersection = pointOnLine(x, y, points[segment], points[segment+1], points[0], points[1]);
      for (let i=0; i < points.length; i+=2) {
        if (intersection) {
          let [px, py] = intersection;
          console.log(`segment ${segment} hit at ${px}, ${py}`);
          this.grabInfo = [points, "edge", segment];
          return;
        }
        segment = i;
        intersection = pointOnLine(x, y, points[i], points[i+1], points[i+2], points[i+3]);
      }
    }
    for (let points of this.polygons) {
      if (pointInPolygon(x, y, points)) {
        console.log(`polygon hit`);
        this.grabInfo = [points, "polygon"];
        return;
      }
    }
    
    this.grabInfo = null;
  }
  
  touchmove(x,y, dx, dy) {
    if (!this.grab)
      return;
    if (this.grabInfo != null) {
      let [points, type, index] = this.grabInfo;
      if (type == "vertex") {
        points[index] += dx;
        points[index+1] += dy;
      }
      else if (type == "edge") {
        points[index] += dx;
        points[index+1] += dy;
        if (index+2 < points.length) {
          points[index+2] += dx;
          points[index+3] += dy;
        }
        else {
          points[0] += dx;
          points[1] += dy;
        }
      }
      else if (type = "polygon") {
        for (let i=0; i < points.length; i+=2) {
          points[i] += dx;
          points[i+1] += dy;
        }
      }
      this.dirty = true;
    }
  }
  
  touchup(x, y) {
    this.grab = false;
  }
}

let app = new GameApp(document.getElementById("canvasContainer"));