// CANVAS =========================================================
const canvas = document.querySelector("#game__board");
canvas.width = 300;
canvas.height = 300;

const context = canvas.getContext("2d");

// background
context.fillStyle = "#fff"; // backgrou color
context.fillRect(0, 0, canvas.height, canvas.width); // fill background

// border
context.lineWidth = 2; // border width
context.strokeStyle = "#000"; // border color
context.strokeRect(0, 0, canvas.width, canvas.height); // fill border

// SNAKE ================================================
// set snake position
let snake = [
  { x: 150, y: 150 },
  { x: 140, y: 150 },
  { x: 130, y: 150 },
  { x: 120, y: 150 },
  { x: 110, y: 150 },
];

// draw snake parts
const drawSnakeParts = (parts) => {
  context.fillStyle = "#90EE90";
  context.strokestyle = "#006400";

  context.fillRect(parts.x, parts.y, 10, 10);
  context.strokeRect(parts.x, parts.y, 10, 10);
};

// draw snake
function drawSnake() {
  snake.forEach(drawSnakeParts);
}

// clear old snake trails
function clearCanvas() {
  context.fillStyle = "#fff";
  context.strokeStyle = "#000";

  context.fillRect(0, 0, canvas.width, canvas.height);
  context.strokeRect(0, 0, canvas.width, canvas.height);
}

// snake next position
let dx = 10;
let dy = 0;

// FOOD =========================================================
// generate a random number from min to max by 10s
function randomTens(min, max) {
  return Math.round((Math.random() * (max - min) + min) / 10) * 10;
}

// set food next position
const foodPosition = {
  x: randomTens(0, canvas.width - 10),
  y: randomTens(0, canvas.height - 10),
};

// create food
function createFood() {
  foodPosition.x = randomTens(0, canvas.width - 10);
  foodPosition.y = randomTens(0, canvas.height - 10);

  // check if snake ate a food
  let foodIsOnSnake = snake.some((pos) => pos === foodPosition);
  // create next food
  if (foodIsOnSnake) createFood();
}

// draw food to canvas
function drawFood() {
  context.fillStyle = "#f00";
  context.strokestyle = "#8b00";

  context.fillRect(foodPosition.x, foodPosition.y, 10, 10);
  context.strokeRect(foodPosition.x, foodPosition.y, 10, 10);
}

// MOVEMENTS =================================================
// game score
let score = 0;

// set snake move position
function advanceSnake(dx, dy) {
  // set next snake head position
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };
  // add next snake head position
  snake.unshift(head);
  // check if snake ate a food
  const didEatFood =
    snake[0].x === foodPosition.x && snake[0].y === foodPosition.y;

  if (didEatFood) {
    // then create food
    createFood();
    // add score
    score += 10;
    // set score on ui
    document.querySelector(".score").innerText = score;
  } else {
    // else remove tail
    snake.pop();
  }
}

// set changing direction status
let changingDirection = false;

// change snake direction
function changeDirection(event) {
  // set snake move status
  if (changingDirection) return;
  changingDirection = true;

  // key press by user
  const keyPressed = event.keyCode;

  // set keyboard key code
  const LEFT_KEY = 37;
  const RIGHT_KEY = 39;
  const UP_KEY = 38;
  const DOWN_KEY = 40;

  // snake direction
  const goingUp = dy === -10;
  const goingDown = dy === 10;
  const goingRight = dx === 10;
  const goingLeft = dx === -10;

  // move up
  if (keyPressed === UP_KEY && !goingDown) {
    dx = 0;
    dy = -10;
  }

  // move down
  if (keyPressed === DOWN_KEY && !goingUp) {
    dx = 0;
    dy = 10;
  }

  // move left
  if (keyPressed === LEFT_KEY && !goingRight) {
    dx = -10;
    dy = 0;
  }

  // move right
  if (keyPressed === RIGHT_KEY && !goingLeft) {
    dx = 10;
    dy = 0;
  }
}

// move snake
function move() {
  // return if game over
  if (didGameEnd()) return;
  setTimeout(function onTick() {
    // set changing direction to false
    changingDirection = false;
    // clear old snake position
    clearCanvas();
    // draw food
    drawFood();
    // move snake position
    advanceSnake(dx, dy);
    // draw snake
    drawSnake();
    // recusion
    move();
  }, 100);
}

// GAME OVER ================================================
function didGameEnd() {
  for (let i = 4; i < snake.length; i++) {
    const didCollide = snake[i].x === snake[0].x && snake[i].y === snake[0].y;
    if (didCollide) return true;
  }
  const hitLeftWall = snake[0].x < 0;
  const hitRightWall = snake[0].x > canvas.width - 10;
  const hitToptWall = snake[0].y < 0;
  // 0;
  const hitBottomWall = snake[0].y > canvas.height - 10;
  return hitLeftWall || hitRightWall || hitToptWall || hitBottomWall;
}

// start game
move();

// add event listener on keypress
document.addEventListener("keydown", changeDirection);
