let playerText = document.getElementById("playerText")
let restartButton = document.getElementById("restartButton")
let boxes = Array.from(document.getElementsByClassName("box"))
const xText = "X"
const oText = "O"
let currentPlayer = xText
let idleBlock = getComputedStyle(document.body).getPropertyValue('--idle-block')
let cells = Array(9).fill(null)
let winningblocks = getComputedStyle(document.body).getPropertyValue('--winning-blocks')
function startGame() {
    for(let i = 0; i < 9; i++) {
        boxes[i].addEventListener('click', boxClicked)
    }
}
function boxClicked(e) {
    let cellsNotEmpty = 0;
    let idx = e.target.id;
    for(let i = 0; i < 9; i++) {
        if(cells[i]) {
            cellsNotEmpty++;
        }
    }
    if(cellsNotEmpty == 9) {
        playerText.innerText = "It is a draw!"
        return
    }
    if(!cells[idx]) {
        cells[idx] = currentPlayer
        e.target.innerText = currentPlayer
        const hasWon = playerWon()

        if(hasWon.length == 3) {
            for(let i = 0; i < 3; i++) {
                Array.from(document.getElementsByClassName("box"))[hasWon[i]].style.backgroundColor = winningblocks;

            }
            playerText.innerText = currentPlayer + " has won!"
            for(let i = 0; i < 9; i++) {
                boxes[i].removeEventListener('click', boxClicked)
            }
            return 
        }

        if(currentPlayer == xText) {
            currentPlayer = oText
        }
        else {
            currentPlayer = xText
        }
    }
}
function playerWon() {
    if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
        return [0, 1, 2]
    }
    if(cells[3] == currentPlayer && cells[4] == currentPlayer && cells[5] == currentPlayer) {
        return [3, 4, 5]
    }
    if(cells[6] == currentPlayer && cells[7] == currentPlayer && cells[8] == currentPlayer) {
        return [6, 7, 8]
    }
    if(cells[0] == currentPlayer && cells[3] == currentPlayer && cells[6] == currentPlayer) {
        return [0, 3, 6]
    }
    if(cells[0] == currentPlayer && cells[1] == currentPlayer && cells[2] == currentPlayer) {
        return [0, 1, 2]
    }
    if(cells[1] == currentPlayer && cells[4] == currentPlayer && cells[7] == currentPlayer) {
        return [1, 4, 7]
    }
    if(cells[2] == currentPlayer && cells[5] == currentPlayer && cells[8] == currentPlayer) {
        return [2, 5, 8]
    }
    if(cells[0] == currentPlayer && cells[4] == currentPlayer && cells[8] == currentPlayer) {
        return [0, 4, 8]
    }
    if(cells[2] == currentPlayer && cells[4] == currentPlayer && cells[6] == currentPlayer) {
        return [2, 4, 6]
    }
    return []
}
restartButton.addEventListener('click', restart)

function restart() {
    for(let i = 0; i < 9; i++) {
        cells[i] = null
    }
    currentPlayer = xText
    for(let i = 0; i < 9; i++) {
        boxes[i].innerHTML = ''
        boxes[i].addEventListener('click', boxClicked)
    }
    for(let i = 0; i < 9; i++) {
        Array.from(document.getElementsByClassName("box"))[i].style.backgroundColor = idleBlock
    }
    playerText.innerText = 'Tic tac toe'
}
/**
 * winning combos
 * 0, 1, 2
 * 3, 4, 5
 * 6, 7, 8
 * 0, 3, 6
 * 1, 4, 7
 * 2, 5, 8
 * 0, 4, 8
 * 2, 4, 6
 */

startGame();