// alert("het werkt")

let cvs = document.getElementById('canvas');
let winHeight = window.innerHeight;
let winWidth = window.innerWidth;

cvs.style.backgroundColor = "#FF8";
// cvs.style.left = "100px";
// cvs.style.top = "100px";
cvs.width = 700;  //winWidth - 200;
cvs.height = 700; //winHeight - 200;

cvs.style.border = '3px solid red';
cvs.style.overflow = 'none';
/*
To create objects on the canvas the CONTEXT is essential
*/
let ctx = cvs.getContext('2d');
/*
Make canvas dimensions variable
*/
let cvsWidth = cvs.width;
let cvsHeight = cvs.height;
/*
take margins and paddings of the canvas into account as
offsets
*/
let offsetX, offsetY;
getOffset = () => {
  let cvsOffsets = cvs.getBoundingClientRect();
  offsetX = cvsOffsets.left;
  offsetY = cvsOffsets.top;
}
getOffset();
window.onscroll = () => {getOffset();}
window.onresize = () => {getOffset();}
cvs.onresize = () => {getOffset();}

let shapes = [];
let curShapeIdx = null;
let isDragging = false;
let srtX, srtY;
/*
We push new shapes into this array by pushing a JS object
with some attributes we see fit.
Blue is the last one drawn; it get's on top.
*/
shapes.push({ x: 200, y: 50, width: 200, height: 200, color: 'red'});
shapes.push({ x: 20, y: 20, width: 100, height: 100, color: 'blue'});

/*
Detect edge collision
*/
edgeCollision = (shape, cvs) => {
  let lefCol = (shape.x < 15);
  let rigCol = ((shape.x + shape.width) > (cvs.width - 15));
  let topCol = (shape.y < 15);
  let botCol =  ((shape.y + shape.height) > (cvs.height - 15));
  return (lefCol || rigCol || topCol || botCol);
}

/*
Draw these shapes onto the canvas.
Define functions before calling them. !IMPORTANT
*/
drawShapes = () => {
  // this will remove all drawings from entire canvas
  ctx.clearRect(3, 3, cvsWidth, cvsHeight);
  for(let shape of shapes) {
    ctx.fillStyle = shape.color;

    // if (!edgeCollision(shape, cvs)) {
    //   ctx.clearRect(3, 3, cvsWidth, cvsHeight);
    //   ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
    // }

    if (shape.x < 15) { shape.x = 15; }
    if ((shape.x + shape.width) > (cvs.width - 15)) {
      shape.x = cvs.width - shape.width - 15;
    }
    if (shape.y < 15) { shape.y = 15; }
    if ((shape.y + shape.height) > (cvs.height - 15)) {
      shape.y = cvs.height - shape.height - 15;
    }
    ctx.fillRect(shape.x, shape.y, shape.width, shape.height);   
  }
}
drawShapes();


/*
Program mouse handle functionality. 
In these mouse functions we'll change the x- and y-coordinates
of the shapes.
*
mouseInShape detects whether the cursor is inside the shape on
a mouseDown event. This is just a handy custom function that
has notthing to do with mouse events.
*/
let mouseInShape = function(x, y, shape) {
  let sLeft = shape.x;
  let sRight = shape.x + shape.width;
  let sTop = shape.y;
  let sBottom = shape.y + shape.height;

  return (x > sLeft && x < sRight && y > sTop && y < sBottom) 
}


/*
mouseDown is a real event. It triggers the event  when we press 
the left mouse button.
We NEED to register the events AFTER we define the function!
*/
let mouseDown = (e) => {
  // Tell the browser that we do our own things.
  e.preventDefault();
  // console.log(e);
  // parseInt() makes sure we have a number to work with.
  srtX = parseInt(e.clientX - offsetX);
  srtY = parseInt(e.clientY - offsetY);
  // console.log(srtX,'*',srtY)

  /*
  detect whether we mouse down on one of the shapes.
  curShapeIdx is a global var that holds the index of the
  shape we've currently clicked upon.
  */
  let index = 0;
  for (let shape of shapes) {

    if (ctx.isPointInPath(srtX, srtY)) {
      console.log("point in path");
    }

    if (mouseInShape(srtX, srtY, shape)) {
      /*
      The last shape drawn get's 'on top';
      */
      console.log("In shape with index: ", index, shape.color);
      curShapeIdx = index;
      /*
      isDragging sets the currently clicked shape to a
      state where it's 'draggable'. It's not yet in the
      process of being dragged, that's happening through
      mouseMove().
      */
      isDragging = true;  // isDraggable
      /*
      return is !IMPORTANT because we want only 'select'
      and move the currently clicked upon shape.
      */
      return;
    }
    index++;
  }
} // end mouseDown() ---------------------------------


let mouseUp = (e) => {
  if (!isDragging) {
    /*
    When we're not in dragging mode we return
    */
    return;
  }
  e.preventDefault();
  /*
  When we lift the mouse button this event is triggered
  and when we're in dragging mode, we stop draggability.
  */
  isDragging = false;
}


let mouseOut = (e) => {
  if (!isDragging) {
    return;
  }
  e.preventDefault();
  isDragging = false;
}

/*
mouseMove() is triggered on EACH and EVERY movement of the
mouse, independent of whether there's an object 'under' the
mouse the be dragged or not.
It just keeps generating mouse coordinates all the time.
*/
let mouseMove = (e) => {
  if (!isDragging) {
    /*
    When we're not dragging we're not conserned with the
    generated mouse coordinates.
    */
    return;
  } else {
    e.preventDefault();
    /*
    get the currently generated mouse coordinates.
    */
    let curX = parseInt(e.clientX - offsetX);
    let curY = parseInt(e.clientY - offsetY);
    /*
    calculate the distance between the mouseDown position
    and the currently generated mouse coordinates.
    */
    let dX = curX - srtX;
    let dY = curY - srtY;
    /*
    get the currently selected shape
    */
    let currentShape = shapes[curShapeIdx];
    /*
    update the currently selected shape's position. 
    Here we can take the shape's width and height into account
    to prevent it from running off the canvas.
    */
    currentShape.x += dX;
    currentShape.y += dY;
    /*
    clear the canvas - this deletes the old shape - and draw 
    the shape on it's new position.
    */
    drawShapes();
    /*
    store the current mouse position so we can use
    that on the next moved mouse position.
    */
    srtX = curX;
    srtY = curY;
  }
}
// https://www.youtube.com/watch?v=7PYvx8u_9Sk&list=PLN0tvDAN1yvSNbkHAwPzJ5O4pP_e2vyme&index=11

/*
register mouse events THE ORDER IS IMPORTANT!
function FIRST then register.
*/
cvs.onmousedown = mouseDown;
cvs.onmouseup = mouseUp;
cvs.onmouseout = mouseOut;
cvs.onmousemove = mouseMove;