const wordArray = [
  "concentrate",
  "private",
  "view",
  "news",
  "rhetoric",
  "pony",
  "employee",
  "worth",
  "fill",
  "hotdog",
  "threshold",
  "fork",
  "cake",
  "impact",
  "systematic",
  "handy",
  "means",
  "help",
  "manage",
  "routine",
  "tradtion",
  "affair",
  "cater",
  "roof",
  "deprivation",
  "blast",
  "shower",
  "landscape",
  "sofa",
  "program",
  "empirical",
  "casualty",
  "install",
  "disappointment",
  "tribe",
  "publisher",
  "financial",
  "green",
  "absorb",
  "curtain",
  "picture",
  "apple",
  "single",
  "prejudice",
  "architect",
  "lane",
  "lend",
  "contempt",
  "ranch",
  "fitness"
];

window.onload = (event) => {
  const canvas = document.getElementById("test-canvas");
  const ctx = canvas.getContext("2d");
  const position = canvas.width / 2;
  const container = document.querySelector(".container");
  let difficultySpeed = 1;
  let yval = -50;
  let missilePosition = canvas.height + 10;
  let fallingOpacity = 1;
  let fontSize = 40;
  let rgbValue = 150;
  let points = 0;
  let lives = 3;
  let backgroundScrolly = 0;
  let missileHit = false;
  let explosionOpacity = 0.1;

  function randomNumberGenerator() {
    const number = Math.floor(Math.random() * wordArray.length);
    return number;
  }
  let randomIndexNumber = randomNumberGenerator();
  const wordInput = document.getElementById("word-input");

  document.querySelector(".button-container").addEventListener(
    "click",
    (event) => {
      if (event.target.className === "difficulty-button") {
        switch (event.target.id) {
          case "easy":
            difficultySpeed = 1;
            break;
          case "medium":
            difficultySpeed = 2;
            break;
          case "hard":
            difficultySpeed = 3;
            break;
          default:
        }
        container.removeChild(container.firstElementChild);
        draw();
        wordInput.focus();
      }
    },
    false
  );

  function draw() {
    if (lives <= 0) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      ctx.font = "40px Roboto";
      ctx.fillStyle = "red";
      ctx.fillText("Game over :(", position, canvas.height / 2);
      return;
    }
    let typedWord = wordInput.value.toLowerCase();
    ctx.clearRect(0, 0, 400, 400);
    movingBackground();
    fallingWords();
    score();
    hearts();
    if (typedWord === wordArray[randomIndexNumber]) {
      missile();
    }
    window.requestAnimationFrame(draw);
  }

  function score() {
    ctx.font = "30px Roboto";
    ctx.fillStyle = "#FFC49B";
    ctx.fillText(points, 30, 30);
  }

  function hearts() {
    let rightMargin = 30;
    for (let i = lives; i > 0; i--) {
      ctx.font = "30px Roboto";
      ctx.fillStyle = "red";
      ctx.fillText("❤", canvas.width - rightMargin, canvas.height - 30);
      rightMargin = rightMargin + 30;
    }
  }

  function fallingWords() {
    ctx.font = `${fontSize}px Roboto`;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    ctx.shadowColor = "rgb(50, 50, 50, 1)";
    //ctx.fillStyle = `rgba(200, ${rgbValue}, ${rgbValue}, ${explosionOpacity})`;
    ctx.fillStyle = `rgba(255, 239, 211, ${fallingOpacity}`;
    ctx.fillText(wordArray[randomIndexNumber], position, yval);
    ctx.textAlign = "center";
    yval = yval + difficultySpeed;
    fontSize = fontSize + difficultySpeed / 7;

    if (fallingOpacity <= 0) {
      missileHit = false;
      fallingOpacity = 1;
      yval = -50;
      fontSize = 40;
      rgbValue = 150;
      randomIndexNumber = randomNumberGenerator();
    }

    if (missileHit === true) {
      fontSize = fontSize + 0.9;
      fallingOpacity = fallingOpacity - 0.05;
      return;
    }

    if (yval > canvas.height + fontSize) {
      randomIndexNumber = randomNumberGenerator();
      yval = -50;
      fontSize = 40;
      rgbValue = 150;
      lives--;
      wordInput.value = "";
    }
  }

  function missile() {
    ctx.fillStyle = "black";
    ctx.beginPath();
    //ctx.arc(position, missilePosition, 10, 0, 2 * Math.PI);
    //ctx.fill();
    ctx.moveTo(position, missilePosition);
    ctx.lineTo(position + 15, missilePosition + 35);
    ctx.lineTo(position - 15, missilePosition + 35);
    ctx.closePath();
    ctx.fill();
    missilePosition = missilePosition - 10;

    if (missilePosition < yval) {
      missileHit = true;
      missilePosition = 410;
      wordInput.value = "";
      points++;
      return;
    }
  }

  function movingBackground() {
    ctx.fillStyle = "#adb6c4";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
};