const CubeFace = modifier => {
  const cubeFace = document.createElement("div");
  cubeFace.classList.add("a-cube__face");
  if (modifier) {
    cubeFace.classList.add(modifier);
  }

  return cubeFace;
};

const Cube = () => {
  const cube = document.createElement("div");
  cube.classList.add("m-cube");
  cube.appendChild(CubeFace("-front"));
  cube.appendChild(CubeFace("-right"));
  cube.appendChild(CubeFace("-back"));
  cube.appendChild(CubeFace("-left"));
  cube.appendChild(CubeFace("-top"));
  cube.appendChild(CubeFace("-bottom"));
  return cube;
};

class Pad {
  constructor(id, lenght, multiplier, position) {
    this.elem = document.getElementById(id);
    this.position = position;
    this.lenght = lenght;
    this.multiplier = multiplier;
  }
  update() {
    this.elem.style.top = `${this.position * this.multiplier}%`;
  }
  draw() {
    for (let i = 0; i < this.lenght; i += 1) {
      this.elem.appendChild(Cube());
    }
    this.update();
  }
}

class AiPad extends Pad {
  constructor(lenght, multiplier) {
    super("ai", lenght, multiplier, 6);
    this.elem.style.left = 0;
  }
}

class PlayerPad extends Pad {
  constructor(lenght, multiplier) {
    super("player", lenght, multiplier, 6);
    this.elem.style.right = 0;
  }
}

class Ball {
  constructor(multiplier) {
    this.elem = document.getElementById("ball");
    this.multiplier = multiplier;
    this.position = {
      x: 8,
      y: 8
    };
    this.vector = {
      x: Ball.getVectorSingleDirection(),
      y: Ball.getVectorSingleDirection()
    };
  }

  update() {
    this.elem.style.top = `${this.position.y * this.multiplier}%`;
    this.elem.style.left = `${this.position.x * this.multiplier}%`;
  }

  draw() {
    this.elem.appendChild(Cube());
    this.update();
  }
  
  initReset() {
    this.elem.classList.add('-blink');
    this.elem.classList.add('-reset');
  }
  endReset() {
    this.elem.classList.remove('-blink');
    this.elem.classList.remove('-reset');
  }
  resetPosition() {
    this.position.x = 8;
    this.position.y = 8;
    this.update();
  }

  static getVectorSingleDirection() {
    return Math.random() > 0.5 ? 1 : -1;
  }
}

class ScoreBoard {
  constructor() {
    this.score = {
      ai: 0,
      player: 0
    };
    this.aiScoreElem = document.getElementById("aiScore");
    this.playerScoreElem = document.getElementById("playerScore");
  }
  updateScore(key) {
    this.score[key] += 1;
    this.aiScoreElem.textContent = this.score.ai;
    this.playerScoreElem.textContent = this.score.player;
  }
  aiScored() {
    this.updateScore("ai");
  }
  playerScored() {
    this.updateScore("player");
  }
}

class App {
  constructor(id, size) {
    this.size = size;
    this.pixelSize = 100 / size;
    this.elem = document.getElementById(id);
    this.aiPad = new AiPad(5, this.pixelSize);
    this.playerPad = new PlayerPad(5, this.pixelSize);
    this.ball = new Ball(this.pixelSize);
    this.scoreBoard = new ScoreBoard();

    this.direction = {
      up: false,
      down: false
    };
    this.updatebleElements = [this.aiPad, this.playerPad, this.ball];

    this.start = this.start.bind(this);
    this.update = this.update.bind(this);
    this.updatePositions = this.updatePositions.bind(this);
    this.keyDown = this.keyDown.bind(this);
    this.resetBall = this.resetBall.bind(this);
  }

  draw() {
    this.updatebleElements.forEach(elem => elem.draw());
  }
  
  resetBall() {
    const ball = this.ball;
    ball.initReset();
    setTimeout(() => {
      ball.resetPosition();
      setTimeout(() => {
        ball.endReset();
        this.start();
      }, 2000);
    }, 1000);
  }

  updatePositions() {
    const {
      direction,
      playerPad,
      aiPad,
      ball,
      updateInterval,
      size,
      scoreBoard,
      resetBall
    } = this;
    let move = true;
    if (direction.up && playerPad.position > 0) {
      playerPad.position -= 1;
    }
    if (direction.down && playerPad.position < size - 5) {
      playerPad.position += 1;
    }
    if (ball.vector.x > 0) {
      if (ball.position.x === size - 2) {
        let diff = ball.position.y - playerPad.position;

        if (diff >= 0 && diff <= 4) {
          ball.vector.x = -1;
        }
        if (diff === -1 && ball.vector.y === 1) {
          ball.vector.y = -1;
          ball.vector.x = -1;
        }
        if (diff === 5 && ball.vector.y === -1) {
          ball.vector.y = 1;
          ball.vector.x = -1;
        }
      } else if (ball.position.x === size - 1) {
        clearInterval(updateInterval);
        this.updateInterval = null;
        scoreBoard.aiScored();
        resetBall(ball);
        move = false;
      }
    }
    if (ball.vector.x < 0) {
      if (ball.position.x === 1) {
        ball.vector.x = 1;
      }
    }

    if (ball.vector.y > 0) {
      if (ball.position.y === size - 1) {
        ball.vector.y = -1;
      }
    }
    if (ball.vector.y < 0) {
      if (ball.position.y === 0) {
        ball.vector.y = 1;
      }
    }

    if (move) {
      ball.position.x += ball.vector.x;
      ball.position.y += ball.vector.y;

      aiPad.position = ball.position.y - 2;
      aiPad.position = aiPad.position < 0 ? 0 : aiPad.position;
      aiPad.position = aiPad.position > size - 5 ? size - 5 : aiPad.position;
    }

    direction.up = false;
    direction.down = false;
  }

  keyDown(event) {
    switch (event.key) {
      case "ArrowUp":
        this.direction.up = true;
        break;
      case "ArrowDown":
        this.direction.down = true;
        break;
    }
  }

  update() {
    this.updatePositions();
    this.updatebleElements.forEach(elem => elem.update());
  }

  updateScore(key) {
    this.score[key] += 1;
    document.getElementById("aiScore").textContent = this.score.ai;
    document.getElementById("playerScore").textContent = this.score.player;
  }

  start() {
    this.elem.classList.add("-gameOn");
    setTimeout(() => {
      if (!this.updateInterval) {
        this.updateInterval = setInterval(this.update, 300);
      }  
    }, 500);
    
  }
}

function init() {
  const app = new App("app", 17);
  app.draw();
  document.body.addEventListener("keydown", app.keyDown);
  document.getElementById("start").addEventListener("click", app.start);
}
if (
  document.readyState === "complete" ||
  (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
  init();
} else {
  document.addEventListener("DOMContentLoaded", init);
}