// select all elements using querySelector
const btn = document.querySelector('.btn');
const textBox = document.querySelector('.text-box');
const guessText = document.querySelector('.guess-text');
const previousGuesses = document.querySelector('.previous-guesses');
const previousGuessesContent = document.querySelector('.previous-guesses span');
const guessCount = document.querySelector('.guess-count');
const resetBtn = document.querySelector('.reset-btn');
let previousGuessesArray = [];
// focus the text field
textBox.focus();

// random number
const randomNumber = Math.floor(Math.random() * 100)+1;

// Guess the number function 
function guessTheNumber(e){
  let userGuess = parseInt(textBox.value);
  previousGuessesArray = previousGuessesArray.concat(userGuess);
  previousGuessesContent.innerHTML =  previousGuessesArray;
  console.log(previousGuessesArray);
  previousGuessesArray.forEach( item => console.log(item));
  if(previousGuessesArray.length < 10){
    if(randomNumber === userGuess){
      guessText.textContent = 'you are right';
      guessText.style.color = 'green';
      disableAll();
      enableResetBtn();
      previousGuessesArray = [];
    }
    else if(userGuess < randomNumber){
      guessText.style.color = 'red';
      guessText.textContent = 'very low';
      textBox.focus();
    }
    else if(userGuess > randomNumber && userGuess > 100){
      guessText.style.color = 'red';
      guessText.textContent = "I say you to guess numbers from 1 to 100";
      textBox.focus();
    }
    else if(userGuess > randomNumber){
      guessText.style.color = 'red';
      guessText.textContent = "too high";
    }
  }
  else{
    guessText.textContent = 'Game over';
    guessText.style.color = 'red';
    disableAll();
    enableResetBtn();
  }
  textBox.value = '';
}
function resetGame(e){
  enableAll();
  guessText.textContent = '';
  previousGuessesContent.textContent = '';
  previousGuessesArray = [];
  resetBtn.classList.remove('visible');
  resetBtn.classList.add('hidden');
}
function enableAll(){
  textBox.classList.remove('disabled');
  btn.classList.remove('disabled');
}

function disableAll(){
  textBox.classList.add('disabled');
  btn.classList.add('disabled');
}

function enableResetBtn(){
  resetBtn.classList.add('visible');
}

btn.addEventListener('click',guessTheNumber);
resetBtn.addEventListener('click',resetGame);