let r = document.getElementById("rayVisuliser");
let rctx = r.getContext("2d");
let o = document.getElementById("output");
let octx = o.getContext("2d");

let collisionArray = initObject(1,200,1,200);

let myObjects = {};

newObject(myObjects, "mirror", "mirror", "#000000", 1, 100, 100, 1);
newObject(myObjects, "line", "wall", "#010854", 100,100,100,1);
compileObjects(myObjects, collisionArray);

visuliseCollisionArray(collisionArray, rctx);

function traceRay(angle, position, collisionArray, output) {

}

function drawLineFromAngle (angle, position) {
   let line = {};
   let renderDistance = 200;
   if (Number(angle) == 90) {
      let counter = 0;
      let x = position.x;
      let y = position.y;
      while (counter <= renderDistance) {
         line = {x,y};
         y++;
         counter++;
      }
      return line;
   } else {
      if (Number(angle) == 270) {



      }
      else {
         let gradient = Math.tan(angle);


      }
   }
}

function newObject(objects, name, type, color, x1, y1, x2, y2) {
   objects[`${name}`] = {};
   objects[`${name}`].x1 = x1;
   objects[`${name}`].y1 = y1;
   objects[`${name}`].x2 = x2;
   objects[`${name}`].y2 = y2;
   objects[`${name}`].type = type;
   objects[`${name}`].color = color;
}

function visuliseCollisionArray(collisionArray, ctx) {
   for (x in collisionArray) {
      for (y in collisionArray) {
         if (collisionArray[`${x}`][`${y}`].isOccupied) {
            setPixel(x,y,collisionArray[`${x}`][`${y}`].color, ctx);
         }
      }
   }
}

function compileObjects(objects, collisionArray) {
   for (object in objects) {
      objects[`${object}`]
      let line = getLine(objects[`${object}`].x1,objects[`${object}`].y1,objects[`${object}`].x2,objects[`${object}`].y2);
      let angle = getAngle(objects[`${object}`].x1,objects[`${object}`].y1,objects[`${object}`].x2,objects[`${object}`].y2);
      for (point in line) {
         let x = line[`${point}`].x;
         let y = line[`${point}`].y;
         if (collisionArray[`${x}`][`${y}`].isOccupied) {
            console.log(`collisionArray ${x}, ${y} got overwritten`)
         }
         collisionArray[`${x}`][`${y}`].isOccupied = true;
         collisionArray[`${x}`][`${y}`].type = objects[`${object}`].type;
         collisionArray[`${x}`][`${y}`].angle = angle;
         if (objects[`${object}`].type == "mirror") {
            collisionArray[`${x}`][`${y}`].color = "#03fc0f";
         }
         else {
            if (objects[`${object}`].type == "wall") {
               collisionArray[`${x}`][`${y}`].color = objects[`${object}`].color;
            }
            else {
               collisionArray[`${x}`][`${y}`].color = "#000000";
            }
         }
      }
   }
}

function drawLine(x1, y1, x2, y2) {
   let x, y, dx, dy, dx1, dy1, px, py, xe, ye, i;
   dx = x2 - x1;
   dy = y2 - y1;
   dx1 = Math.abs(dx);
   dy1 = Math.abs(dy);
   px = 2 * dy1 - dx1;
   py = 2 * dx1 - dy1;
   if (dy1 <= dx1) {
      if (dx >= 0) {
         x = x1;
         y = y1;
         xe = x2;
      } else { // Line is drawn right to left (swap ends)
         x = x2;
         y = y2;
         xe = x1;
      }
      setPixel(x, y);
      for (i = 0; x < xe; i++) {
         x = x + 1;
         if (px < 0) {
            px = px + 2 * dy1;
         } else {
            if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
               y = y + 1;
            } else {
               y = y - 1;
            }
            px = px + 2 * (dy1 - dx1);
         }
         setPixel(x, y);
      }
   } else { // The line is Y-axis dominant
      if (dy >= 0) {
         x = x1;
         y = y1;
         ye = y2;
      } else { // Line is drawn top to bottom
         x = x2;
         y = y2;
         ye = y1;
      }
      setPixel(x, y); // Draw first pixel
      for (i = 0; y < ye; i++) {
         y = y + 1;
         if (py <= 0) {
            py = py + 2 * dx1;
         } else {
            if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
               x = x + 1;
            } else {
               x = x - 1;
            }
            py = py + 2 * (dx1 - dy1);
         }
         setPixel(x, y);
      }
   }
}

function getLine(x1, y1, x2, y2) {
   let x, y, dx, dy, dx1, dy1, px, py, xe, ye, i;
   let line = {};
   let pxCounter = 1;
   dx = x2 - x1;
   dy = y2 - y1;
   dx1 = Math.abs(dx);
   dy1 = Math.abs(dy);
   px = 2 * dy1 - dx1;
   py = 2 * dx1 - dy1;
   if (dy1 <= dx1) {
      if (dx >= 0) {
         x = x1;
         y = y1;
         xe = x2;
      } else { // Line is drawn right to left (swap ends)
         x = x2;
         y = y2;
         xe = x1;
      }
      line[`${pxCounter}`] = {};
      line[`${pxCounter}`].x = x;
      line[`${pxCounter}`].y = y;
      pxCounter++;
      for (i = 0; x < xe; i++) {
         x = x + 1;
         if (px < 0) {
            px = px + 2 * dy1;
         } else {
            if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
               y = y + 1;
            } else {
               y = y - 1;
            }
            px = px + 2 * (dy1 - dx1);
         }
         line[`${pxCounter}`] = {};
         line[`${pxCounter}`].x = x;
         line[`${pxCounter}`].y = y;
         pxCounter++;
      }
   } else { // The line is Y-axis dominant
      if (dy >= 0) {
         x = x1;
         y = y1;
         ye = y2;
      } else { // Line is drawn top to bottom
         x = x2;
         y = y2;
         ye = y1;
      }
      line[`${pxCounter}`] = {};
      line[`${pxCounter}`].x = x;
      line[`${pxCounter}`].y = y;
      pxCounter++;
      for (i = 0; y < ye; i++) {
         y = y + 1;
         if (py <= 0) {
            py = py + 2 * dx1;
         } else {
            if ((dx < 0 && dy < 0) || (dx > 0 && dy > 0)) {
               x = x + 1;
            } else {
               x = x - 1;
            }
            py = py + 2 * (dx1 - dy1);
         }
         line[`${pxCounter}`] = {};
         line[`${pxCounter}`].x = x;
         line[`${pxCounter}`].y = y;
         pxCounter++;
      }
   }
   return line;
}

function getAngle(x1,y1,x2,y2) {
   return rad2deg(Math.atan(1/Math.abs((x1-x2)/(y1-y2))));
}

function rad2deg(radians)
{
   return 180 * radians/Math.PI;
}

function setPixel(x,y,color, ctx) {
   ctx.fillStyle = color;
   ctx.fillRect(x - 1,y - 1,1,1);
   ctx.fillStyle = "#000000";
}

function initObject(minX,maxX,minY,maxY) {
   let object = {};
   let xCounter = minX;
   let yCounter = minY;
   while(xCounter <= maxX) {
      object[`${xCounter}`] = {};
      yCounter = minY;
      while(yCounter <= maxY) {
         object[`${xCounter}`][`${yCounter}`] = {};
         yCounter++;
      }
      xCounter++;
   }
   return object;
}

function getRandomObjectValues(object,objectFor,minX,maxX,minY,maxY,minRand,maxRand) {
   let xCounter = minX;
   let yCounter = minY;
   while(xCounter <= maxX) {
      yCounter = minY;
      while(yCounter <= maxY) {
         object[`${xCounter}`][`${yCounter}`][`${objectFor}`] = getRndInteger(minRand,maxRand);
         yCounter++;
      }
      xCounter++;
   }
}

function getRndInteger(min,max) {
   return Math.floor(Math.random() * (max - min + 1) ) + min;
}