<h1>CoderSchool's Psychic Powers Tester</h1>
<p>
	Do you have psychic powers? If so, prove it by guessing what number I am
	thinking of right now. I am thinking of a number between 1 and 10.
</p>

<button onclick="makeGuess()">Guess</button>

<h2>You guessed: <span id="last-guess">?</span></h2>

<h2>That guess was <span id="correct">?</span></h2>

<h2>You have <span id="guesses-remaining">?</span> guesses remaining.</h2>

let secretNumber;
let lastGuess;
let guessesRemaining = 10;
//Milestone 5.1
let pastGuesses = [];
let n; //pastGuesses.Length

const CORRECT_MESSAGE = "Correct! You must be a powerful psychic.";
const INCORRECT_MESSAGE = "Incorrect. You are merely a normal human.";

function generateNumber() {
	//   return 5;
	// MILESTONE 2: Right now the secret number is always 5. Change this
	// to return a secret number between 1 and 10.
	return (secretNumber = Math.floor(Math.random() * (10 - 1) + 1));
	// Math.floor(Math.random() * (max - min) + min);
}

function checkIsCorrect() {
	//   return true;
	// MILESTONE 4: Right now every guess will be true. Change
	// the above code so it checks to make sure lastGuess
	// is equal to secretNumber.

	if (lastGuess == secretNumber) {
		return 0;
	} else if (lastGuess > secretNumber) {
		return 1;
	} else {
		return -1;
	}
}

function makeGuess() {
	if (!secretNumber) {
		generateNumber();
	}
	// MILESTONE 3: ADD CODE HERE to pop up a dialog
	// asking the user for a number.

	lastGuess = parseInt(prompt("What is Guess"), 10);
	pastGuesses.push(lastGuess);
	guessesRemaining--;
	//--------------------------------------------
	updatePage();

	// const INCORRECT_MESSAGE_HIGH = `Sorry! Your guess of ${pastGuesses.length} was too high! You have guessed ${guessesRemaining} times.
	// Your previous guesses were: ${pastGuesses[pastGuesses.length - 1]}.`;
	// const INCORRECT_MESSAGE_LOW = `Sorry! Your guess of ${pastGuesses.length} was too low! You have guessed ${guessesRemaining} times.
	// Your previous guesses were: ${pastGuesses[pastGuesses.length - 1]}.`;
}

// Don't worry about this part! Feel free to play around,
// but we'll teach you all about how JavaScript and HTML
// work together in the next section. If you're done Milestone
// 5, you'll need to fiddle around in here a bit.

function updatePage() {
	document.getElementById("last-guess").innerHTML = lastGuess;
	const correct = document.getElementById("correct");
	const isCorrect = checkIsCorrect();
	if (isCorrect == 0) {
		correct.style.color = "green";
		correct.innerHTML = CORRECT_MESSAGE;
	} else if (isCorrect == -1) {
		correct.style.color = "red";
		correct.innerHTML = `Sorry! Your guess of ${
			pastGuesses.length
		} was too low! You have guessed ${pastGuesses.length} times.
    Your previous guesses were: ${pastGuesses[pastGuesses.length - 2]}, ${
			pastGuesses[pastGuesses.length - 3]
		}.`;
	} else if (isCorrect == 1) {
		correct.style.color = "red";
		correct.innerHTML = `Sorry! Your guess of ${
			pastGuesses.length
		} was too high! You have guessed ${pastGuesses.length} times.
    Your previous guesses were: ${pastGuesses[pastGuesses.length - 2]}, ${
			pastGuesses[pastGuesses.length - 3]
		}.`;
	}

	const remaining = document.getElementById("guesses-remaining");
	remaining.innerHTML = guessesRemaining;

	//Milestone 5.1
	console.log(pastGuesses);
	console.log(pastGuesses.length);
	//   console.log(`Sorry! Your guess of ${pastGuesses.length} was too high! You have guessed ${guessesRemaining} times. Your previous guesses were: ${pastGuesses[pastGuesses.length - 1]}.`)
}

console.log(generateNumber());
console.log(lastGuess);