let height = 20;
let width = 20;
let squareSize = 20;
let canvasWidth = 400;
let canvasHeight = 400;
let tileArr = [];
let imgArr;
let player;
let distProp;

function setup() {
  createCanvas(canvasWidth,canvasHeight);
  pixelDensity(1)
  distProp = Math.sqrt(
    ((.5 * canvasHeight) * (.5 * canvasHeight))+
    ((.5 * canvasWidth) * (.5 * canvasWidth)));
  imgArr = [
    loadImage('../images/160cobble.png'),
    loadImage('../images/160mario.png'),
    loadImage('../images/160black.png')
    ];

  for(let i = 0; i < width; i++){
    tileArr[i] = [];
    for(let j = 0; j < height; j++){
      tileArr[i][j] = new Tiles(i * squareSize, j * squareSize, imgArr[0], squareSize);
    }
  }
  tileArr[5][6].show(imgArr[2]);
  tileArr[8][9].show(imgArr[2]);
  tileArr[3][4].show(imgArr[2]);

  player = new LightSource(200,200,255)
}

function draw() {
  background(0)
  for(let i = 0; i < width; i++){
    for(let j = 0; j < height; j++){
      tileArr[i][j].draw();
    }
  }

  drawLines(tileArr[5][6],player)
  drawLines(tileArr[8][9],player)
  drawLines(tileArr[3][4],player)


  player.draw()


  loadPixels();


  for(let i = 0; i < canvasWidth; i++){
    for(let j = 0; j < canvasHeight; j++){
      dimColor(i,j,distForm(player.x,i,player.y,j),pixels)
    }
  }


  updatePixels();


}

class Tiles{
  constructor(x,y,img,size){
    this.x = x;
    this.y = y;
    this.img = img;
    this.block = false;
    this.squareSize = size;
  }
  show(img){
    this.block = true;
    this.img = img;
  }
  erase(){
    this.block = false;
    this.img = imgArr[1];
  }
  draw(){
    image(this.img,this.x,this.y,squareSize,squareSize);
  }
}

class LightSource{
  constructor(x,y,brightness){
    this.x = x;
    this.y = y;
    this.brightness = brightness;
  }

  draw(){
    fill('#FFFF00')
    ellipse(this.x,this.y,5)
  }
}



function getPixelColor(x,y,p){
  let index = 4 * y * canvasWidth + (4 * x);
  return [p[index], p[index+1], p[index+2]]
}

function setPixelColor(x,y,col,p){
  let index = 4 * y * canvasWidth + (4 * x);
  p[index] = col[0]
  p[index+1] = col[1]
  p[index+2] = col[2]
}

function dimColor(x,y,dist,p){
  index = 4 * y * canvasWidth + (4 * x);
  setPixelColor(x,y,[p[index]-((dist/distProp)*255),p[index+1]-((dist/distProp)*255),p[index+2]-((dist/distProp)*255)],p)
}

function keyPressed() {
  switch(keyCode){
    case LEFT_ARROW:
        player.x -= 10
      break;
    case RIGHT_ARROW:
        player.x += 10
      break;
    case UP_ARROW:
        player.y -= 10
      break;
    case DOWN_ARROW:
        player.y+= 10
      break;
  }
}

function distForm(x1,x2,y1,y2){
  return int(Math.sqrt(((x2-x1)*(x2-x1))+((y2-y1)*(y2-y1))));
}

function drawLines(square,player){
  let [p1, p2]= getSquareCorners(square,player)
  let x1 = Math.sqrt(2)+(.5*canvasWidth)*Math.cos(Math.atan2(player.y-p1[1],player.x-p1[0]))
  let y1 = Math.sqrt(2)+(.5*canvasWidth)*Math.sin(Math.atan2(player.y-p1[1],player.x-p1[0]))
  let x2 = Math.sqrt(2)+(.5*canvasWidth)*Math.cos(Math.atan2(player.y-p2[1],player.x-p2[0]))
  let y2 = Math.sqrt(2)+(.5*canvasWidth)*Math.sin(Math.atan2(player.y-p2[1],player.x-p2[0]))

  // line(player.x,player.y,x1,y1);
  // line(player.x,player.y,x2,y2);
  fill(120)
  beginShape();
  vertex(x1, y1);
  vertex(x2, y2);
  vertex(p2[0], p2[1]);
  vertex(p1[0], p1[1]);

  endShape(CLOSE);
}

function getSlope(x1,x2,y1,y2){
    if(x1 == x2) return null;
    return (y2-y1)/(x2-x1);
}

function getSquareCorners(square, playerPos) {
  let topLeft = [square.x, square.y]
  let topRight = [square.x + square.squareSize, square.y]
  let bottomLeft = [square.x, square.y + square.squareSize]
  let bottomRight = [square.x + square.squareSize, square.y + square.squareSize]

  let squareCenter = [square.x + (square.squareSize / 2), square.y + (square.squareSize / 2)]

  let direction
  if (squareCenter[0] < playerPos.x) direciton = "left"
  else direction = "right"

  // top right quadrant or bottom left quadrant
  if ((squareCenter[0] > playerPos.x && squareCenter[1] > playerPos.y) ||
    (squareCenter[0] < playerPos.x && squareCenter[1] < playerPos.y)) {
    return [topLeft, bottomRight]
  }

  // bottom right quadrant or top left quadrant
  if ((squareCenter[0] > playerPos.x && squareCenter[1] < playerPos.y) ||
    (squareCenter[0] < playerPos.x && squareCenter[1] > playerPos.y)) {
    return [topRight, bottomLeft]
  }

  // if straight up
  if (squareCenter[0] == playerPos.x && squareCenter[1] > playerPos.y){
    return [bottomLeft, bottomRight]
  }

  // if straight down
  if (squareCenter[0] == playerPos.x && squareCenter[1] < playerPos.y){
    return [topRight, topLeft]
  }

  // if straight right
  if (square.x < playerPos.x && square.y == playerPos.y){
    return [topLeft, bottomLeft]
  }

  // if straight left
  if (square.x > playerPos.x && square.y == playerPos.y){
    return [topRight, bottomRight]
  }

  console.log("NO THING FOUND")
  return
}
/*
function drawShadow(square,player){
  let [p1,p2,p3,p4] = getCanvasTouchPoints(square,player);
  fill(0);
  beginShape();
  if(p3[0] != p4[0] && p3[1] != p4[1]){
    if(p3[0]==0 && p4[1]==0){
      vertex(0,canvasHeight);
    }else if(p4[0]==0 && p3[1]==0){
      vertex(0,canvasHeight);
    }else if(p3[0]==0 && p4[1]==canvasHeight){
      vertex();
    }else if(){

    }

  }

  endShape(CLOSED)
}
*/