"use strict";

// console.log(document.querySelector(".message").textContent);

// document.querySelector(".message").textContent = "Correct number!";

// document.querySelector(".number").textContent = 14;
// document.querySelector(".score").textContent = 10;

// document.querySelector(".guess").value = 23;
// console.log(document.querySelector(".guess").value);

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highScore = 0;

const displayMessage = function (message) {
  document.querySelector(".message").textContent = message;
};

console.log(`SN: ${secretNumber}`);

document.querySelector(".check").addEventListener("click", event => {
  const guess = Number(document.querySelector(".guess").value);
  console.log(guess, typeof guess);

  if (!guess) {
    displayMessage("⛔ No number");
  } else if (guess === secretNumber) {
    displayMessage("🎉 Correct Number");
    document.querySelector(".number").textContent = secretNumber;
    document.querySelector("body").style.backgroundColor = "#60b347";
    document.querySelector(".number").style.width = "30rem";
    if (score > highScore) {
      highScore = score;
      document.querySelector(".highscore").textContent = highScore;
    }
  } else if (guess !== secretNumber) {
    if (score > 1) {
      displayMessage(guess > secretNumber ? "📈 Too high" : "📈 Too low");
      score--;
      document.querySelector(".score").textContent = score;
    } else {
      displayMessage("🧨 You lost the game");
      document.querySelector(".score").textContent = 0;
    }
  }
});

// Coding challenge
/*
Implement a game rest funtionality, to that the player can make a new guess!
Here is how:

1. Select the element with the "again" class and attach a click event handler
2. In the handler function, restore initial value of the score and number variables
3. Restore the initial conditions of the message, number, score and guess input field
4. Restore the original background color (#222) and number width (15rem)
*/

document.querySelector(".again").addEventListener("click", function () {
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  score = 20;
  displayMessage("Start guessing...");

  document.querySelector(".number").textContent = "?";
  document.querySelector(".score").textContent = score;

  document.querySelector("body").style.backgroundColor = "#222";
  document.querySelector(".number").style = "15rem";
  document.querySelector(".guess").value = "";
  console.log(secretNumber);
});