//
//
// DOM Variables
const X_CLASS = 'x';
const CIRCLE_CLASS = 'o';
const restartButton = document.querySelector('#restartButton');
const cellElements = document.querySelectorAll('.cell');
const WINNING_MESSAGE = document.querySelector('.winning-message');
const BOARD = document.querySelector('.board');
const ENDGAME_MESSAGE = document.querySelector('[data-winning-message]');

// GAME Variables
let winner = false;
let draw = false;
let circleTurn = false;
const WINNING_COMBINATIONS = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6]
];

restartButton.addEventListener('click', startGame);
startGame();

function startGame() {
    cellElements.forEach(cell => {
        cell.classList.remove(X_CLASS);
        cell.classList.remove(CIRCLE_CLASS);
        cell.removeEventListener('click', handleClick);
        cell.addEventListener('click', handleClick, { once: true });
    });
    WINNING_MESSAGE.classList.remove('show');
    circleTurn = false;

    setHoverTurn();

}

function setHoverTurn() {
    BOARD.classList.remove(X_CLASS);
    BOARD.classList.remove(CIRCLE_CLASS);

    if (circleTurn) {
        BOARD.classList.add(CIRCLE_CLASS);
    } else {
        BOARD.classList.add(X_CLASS);
    }
}

function handleClick(event) {
    const cell = event.target;
    const currentClass = BOARD.classList[1];

    cell.classList.add(currentClass);


    if (checkWin(currentClass)) {
        winner = true;
        addEndGameData(winner);
    } else if (checkDraw()) {
        draw = true;
        addEndGameData(draw);
    }
    circleTurn = !circleTurn;

    // vs computer   / computer turn
    if (circleTurn) {
        let possibleWin = predictWin(currentClass);
    }



    setHoverTurn();

}

function checkWin(currentClass) {
    return WINNING_COMBINATIONS.some(combination => {
        return combination.every(index => {
            return cellElements[index].classList.contains(currentClass);
        });
    });

}

function checkDraw() {
    return [...cellElements].every(cell => {
        return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS);
    });

}

function addEndGameData() {

    if (draw) {
        ENDGAME_MESSAGE.innerText = 'No one wins!';
    } else {
        let result = circleTurn ? ENDGAME_MESSAGE.innerText = 'Circle Wins!' : ENDGAME_MESSAGE.innerText = 'X\'s wins!';
    }

    WINNING_MESSAGE.classList.add('show');
}

function predictWin(currentClass) {
    debugger;
    let countPossibleWin = 0;
    let possibleWin = false;

    let check = WINNING_COMBINATIONS.forEach(combination => {
       return combination.forEach(index => {
            if (cellElements[index].classList.contains(currentClass)) {
                countPossibleWin++;
            }
        });
        if (countPossibleWin === 2) {
            return true;
        }
        countPossibleWin = 0;
        return false;
    });

    if (check) {
        console.log('possible win true');
    } else {
        console.log('not possible')
    }

}