"use strict"
let playerTurn = true;
let computerMoveTimeout = 0;

const gameStatus = {
	MORE_MOVES_LEFT: 1,
	HUMAN_WINS: 2,
	COMPUTER_WINS: 3,
	DRAW_GAME: 4
};

window.addEventListener("DOMContentLoaded", domLoaded);

function domLoaded() {
	// Setup the click event for the "New game" button
	const newBtn = document.getElementById("newGameButton");
	newBtn.addEventListener("click", newGame);

	// Create click-event handlers for each game board button
	const buttons = getGameBoardButtons();
	for (let button of buttons) {
		button.addEventListener("click", function () { boardButtonClicked(button); });
	}

	// Clear the board
	newGame();
}

// Returns an array of 9 <button> elements that make up the game board. The first 3 
// elements are the top row, the next 3 the middle row, and the last 3 the 
// bottom row. 
function getGameBoardButtons() {
	return document.querySelectorAll("#gameBoard > button");
}

function checkForWinner() {
	
	const buttons = getGameBoardButtons();

	// Ways to win
	const possibilities = [
		[0, 1, 2], [3, 4, 5], [6, 7, 8], // rows
		[0, 3, 6], [1, 4, 7], [2, 5, 8], // columns
		[0, 4, 8], [2, 4, 6] // diagonals
	];

	// Check for a winner first
	for (let indices of possibilities) {
		if (buttons[indices[0]].innerHTML !== "" &&
			buttons[indices[0]].innerHTML === buttons[indices[1]].innerHTML &&
			buttons[indices[1]].innerHTML === buttons[indices[2]].innerHTML) {
			
			// Found a winner
			if (buttons[indices[0]].innerHTML === "X") {
				return gameStatus.HUMAN_WINS;
			}
			else {
				return gameStatus.COMPUTER_WINS;
			}
		}
	}

	// See if any more moves are left
	let foundEmpty = false;
	for (let button of buttons) {
		if (button.innerHTML !== "X" && button.innerHTML !== "O") {
			return gameStatus.MORE_MOVES_LEFT;
		}
	}

	// If no winner and no moves left, then it's a draw
	return gameStatus.DRAW_GAME;
}

function newGame() {
	// TODO: Complete the function
    clearTimeout();
    let buttons = document.getElementById("gameBoard").getElementsByTagName("button");
    for (let i = 0; i < buttons.length ; i++){
	buttons[i].innerHTML = "";
	buttons[i].disabled = false;
	buttons[i].classList.remove("x");
	buttons[i].classList.remove("o");
    }
    playerTurn = true;
    document.querySelector("#turnInfo").innerHTML = "Your turn";
}

function boardButtonClicked(button) {
    // TODO: Complete the function
    if (playerTurn){
	button.innerHTML = "X";
	button.classList.add("x");
	button.disabled = true;
	switchTurn();
    }
}

//2 is human
//3 is computer

function switchTurn() {
    // TODO: Complete the function
    let winner = checkForWinner();
    let turnInfo = document.querySelector("#turnInfo");

    if (winner === 2){
	//human win
	console.log("Player wins!!!");
	turnInfo.innerHTML = "You win!";
	playerTurn = false;
	
    }
    else if (winner === 3){
	//computer win
	playerTurn = false;
	turnInfo.innerHTML = "Computer wins!";
    }
    else if (winner === 4){
	playerTurn = false;
	turnInfo.innerHTML = "Draw game";
    }
    else{
	
	if (playerTurn){
	    
	    playerTurn = false;
	    turnInfo.innerHTML = "Computer's turn";
	    let computerMoveTimeout = setTimeout(makeComputerMove, 1000);
	}
	else{
	    playerTurn = true;
	    turnInfo.innerHTML = "Your turn";
	}
    }
}

function makeComputerMove() {
	// TODO: Complete the function
    //choose random available button sett to O
    let btns = getGameBoardButtons();
    let availableBtns = [];

    for (let i = 0; i < btns.length; i++){
	if (btns[i].disabled === false){
	    availableBtns.push(btns[i]);
	}
    }

    let btn = availableBtns[Math.floor(Math.random() * availableBtns.length)];

    btn.innerHTML = "O";
    btn.classList.add("o");
    btn.disabled=true;
    switchTurn();
}