let canvas = document.querySelector("#canvas");
let pong = document.querySelector("#pong");
let leftScore = document.querySelector("#leftScore");
let rightScore = document.querySelector("#rightScore");
let ctx = canvas.getContext("2d");

let width = canvas.width;
let height = canvas.height;

const MAX_COMPUTER_SPEED = 2;

const BALL_SIZE = 8;

let ballPosition;

let xSpeed;
let ySpeed;

function initBall() {
  ballPosition = { x: 20, y: 30 };
  xSpeed = 4;
  ySpeed = 2;
}

const PADDLE_WIDTH = 5;
const PADDLE_HEIGHT = 30;
const PADDLE_OFFSET = 10;

let leftPaddleTop = 10;
let rightPaddleTop = 30;

let computerScore = 0;
let userScore = 0;

let gameOver = false;

// Event listeners
document.addEventListener("mousemove", (event) => {
  rightPaddleTop = event.y - canvas.offsetTop - pong.offsetTop - PADDLE_HEIGHT;
});

function drawCanvas() {
  // canvas bg-color
  ctx.fillStyle = "#a0887a";
  ctx.fillRect(0, 0, width, height);

  // all items on the canvas will be white
  ctx.fillStyle = "white";

  // draw ball
  ctx.beginPath();
  ctx.arc(ballPosition.x, ballPosition.y, BALL_SIZE, 0, Math.PI * 2, false);
  ctx.fill();

  // draw dividing line
  ctx.beginPath();
  ctx.moveTo(width / 2, 0);
  ctx.lineTo(width / 2, height);
  ctx.setLineDash([10, 8]);
  ctx.lineWidth = 5;
  ctx.strokeStyle = "white";
  ctx.stroke();

  // draw left paddle
  ctx.fillRect(PADDLE_OFFSET, leftPaddleTop, PADDLE_WIDTH, PADDLE_HEIGHT);

  // draw right paddle
  ctx.fillRect(
    width - PADDLE_WIDTH - PADDLE_OFFSET,
    rightPaddleTop,
    PADDLE_WIDTH,
    PADDLE_HEIGHT
  );

  // Draw scores
  (ctx.font = "40px monospace"), (ctx.textAlign = "left");
  ctx.fillText(computerScore.toString(), 50, 50);
  ctx.textAlign = "right";
  ctx.fillText(userScore.toString(), width - 50, 50);
}

function followBall() {
  let ball = {
    top: ballPosition.y,
    bottom: ballPosition.y + BALL_SIZE,
  };

  let leftPaddle = {
    top: leftPaddleTop,
    bottom: leftPaddleTop + PADDLE_HEIGHT,
  };

  if (ball.top < leftPaddle.top) {
    leftPaddleTop -= MAX_COMPUTER_SPEED;
    return;
  }

  if (ball.bottom > leftPaddle.top) {
    leftPaddleTop += MAX_COMPUTER_SPEED;
    return;
  }
}

function updateBallPosition() {
  ballPosition.x += xSpeed;
  ballPosition.y += ySpeed;
  followBall();
}

function checkPaddleCollision(ball, paddle) {
  return (
    ball.left < paddle.right &&
    ball.right > paddle.left &&
    ball.top < paddle.bottom &&
    ball.bottom > paddle.top
  );
}

function adjustAngle(distanceFromTop, distanceFromBottom) {
  if (distanceFromTop < 0) {
    ySpeed -= 0.5;
    return;
  }

  if (distanceFromBottom < 0) {
    ySpeed += 0.5;
  }
}

function checkCollision() {
  let ball = {
    left: ballPosition.x,
    right: ballPosition.x + BALL_SIZE,
    top: ballPosition.y,
    bottom: ballPosition.y + BALL_SIZE,
  };

  let leftPaddle = {
    left: PADDLE_OFFSET,
    right: PADDLE_OFFSET + PADDLE_WIDTH,
    top: leftPaddleTop,
    bottom: leftPaddleTop + PADDLE_HEIGHT,
  };

  let rightPaddle = {
    left: width - PADDLE_WIDTH - PADDLE_OFFSET,
    right: width - PADDLE_OFFSET,
    top: rightPaddleTop,
    bottom: rightPaddleTop + PADDLE_HEIGHT,
  };

  if (checkPaddleCollision(ball, leftPaddle)) {
    // check if left paddle collision occurred
    let distanceFromTop = ball.top - leftPaddle.top;
    let distanceFromBottom = leftPaddle.bottom - ball.bottom;
    adjustAngle(distanceFromTop, distanceFromBottom);
    xSpeed = Math.abs(xSpeed);
    return;
  }

  if (checkPaddleCollision(ball, rightPaddle)) {
    // check if right paddle collision occurred
    let distanceFromTop = ball.top - rightPaddle.top;
    let distanceFromBottom = rightPaddle.bottom - ball.bottom;
    adjustAngle(distanceFromTop, distanceFromBottom);
    xSpeed = -Math.abs(xSpeed);
    return;
  }

  if (ball.left < 0) {
    userScore++;
    rightScore.innerText = userScore;
    initBall();
    return;
  }

  if (ball.right > width) {
    computerScore++;
    leftScore.innerText = computerScore;
    initBall();
    return;
  }

  if (computerScore > 9 || userScore > 9) {
    gameOver = true;
  }

  if (ball.top < 0 || ball.bottom > height) {
    ySpeed = -ySpeed;
    return;
  }
}

function drawGameOver() {
  ctx.fillStyle = "white";
  ctx.font = "30px monospace";
  ctx.textAlign = "center";
  ctx.fillText("GAME OVER", width / 2, height / 2);

  if (computerScore > 9) {
    ctx.fillStyle = "white";
    ctx.font = "30px monospace";
    ctx.textAlign = "center";
    ctx.fillText("Player 1 Won!", width / 2, height / 2 + PADDLE_HEIGHT);
    return;
  }

  if (userScore > 9) {
    ctx.fillStyle = "white";
    ctx.font = "30px monospace";
    ctx.textAlign = "center";
    ctx.fillText("Player 2 Won!", width / 2, height / 2 + PADDLE_HEIGHT);
    return;
  }
}

function gameLoop() {
  drawCanvas();
  updateBallPosition();
  checkCollision();

  if (gameOver) {
    drawCanvas();
    drawGameOver();
    return;
  }

  setTimeout(gameLoop, 30);
}

initBall();
gameLoop();