function getAndSetElements(n) {

    let divContainer = document.querySelector('.container');

    let divGridElement = document.querySelector('.grid');

    divGridElement.style.gridTemplateColumns = `repeat(${n}, 60px)`;

    divGridElement.style.gridTemplateRows = `repeat(${n}, 60px)`;

    return [divContainer, divGridElement];

}

function generateRandomNumbers(n) {
    let arrOfNumbers = [];

    let playerOnePosX = Math.floor(Math.random() * n) + 0;
    let playerOnePosY = Math.floor(Math.random() * n) + 0;

    let playerTwoPosX = Math.floor(Math.random() * n) + 0;
    let playerTwoPosY = Math.floor(Math.random() * n) + 0;

    let samePosition = playerOnePosX === playerTwoPosX && playerOnePosY === playerTwoPosY;

    while (samePosition) {
        playerOnePosX = Math.floor(Math.random() * n) + 0;
        playerOnePosY = Math.floor(Math.random() * n) + 0;

        playerTwoPosX = Math.floor(Math.random() * n) + 0;
        playerTwoPosY = Math.floor(Math.random() * n) + 0;

        samePosition = playerOnePosX === playerTwoPosX && playerOnePosY === playerTwoPosY;
    }

    arrOfNumbers.push(playerOnePosX, playerOnePosY, playerTwoPosX, playerTwoPosY);

    return arrOfNumbers;
}


function boardCreation(n) {

    let [playerOnePosX, playerOnePosY, playerTwoPosX, playerTwoPosY] = generateRandomNumbers(n);

    let [divContainer, divGridElement] = getAndSetElements(n);

    for (let x = 0; x < n; x++) {

        for (let y = 0; y < n; y++) {

            let divElement = document.createElement('div');

            if (playerOnePosX === x && playerOnePosY === y) {
                divElement.textContent = 1;
            } else if (playerTwoPosX === x && playerTwoPosY === y) {
                divElement.textContent = 2;
            }
            divElement.classList.add('cell');
            divContainer.style.border = '5px solid black';
            divGridElement.appendChild(divElement);
        }

    }
}

function movingPlayers(clickedCell) {
    let secondClick = false;

    if (secondClick) {
        clickedCell.textContent = '*';
    } else {
        let divContainerElement = document.querySelectorAll('.cell');
        divContainerElement = Array.from(divContainerElement);
        let playerCurCell = divContainerElement.find(el => el.textContent === '1');

        playerCurCell.textContent = '';
        clickedCell.textContent = '1';
        cellIndicesMatrix(divContainerElement.map(el => el.textContent), inpNum);
        // secondClick = true;
        divContainerElement.forEach(cell => cell.style.background = 'antiquewhite');
    }
}

function cellIndicesMatrix(arrayOfCells, inpNum) {
    let matrixOfIndices = [];
    let subMatrix = [];

    for (let o = 0; o < arrayOfCells.length;) {

        for (let i = 0; i < inpNum; i++) {

            if (arrayOfCells[o] === '') {
                subMatrix.push(o);
            } else {
                if (arrayOfCells[o] === '1') {
                    subMatrix.push('one');
                } else {
                    subMatrix.push('two');
                }
            }

            o++;

        }

        matrixOfIndices.push(subMatrix);

        subMatrix = [];
    }

    findAdjacentIndices(matrixOfIndices);
}

function findPlayersIndices(matrixOfIndices) {
    let playerOneIndices = undefined;
    let playerTwoIndices = undefined;

    matrixOfIndices.forEach((arr, o) => {
        arr.forEach((el, i) => el === 'one' ? playerOneIndices = [o, i] : false);
        arr.forEach((el, i) => el === 'two' ? playerTwoIndices = [o, i] : false);
    });

    return [playerOneIndices, playerTwoIndices];
}

function findAdjacentIndices(matrixOfIndices) {
    let [playerOneIndices, playerTwoIndices] = findPlayersIndices(matrixOfIndices);
    let arrOfCells = document.querySelectorAll('.cell');
    let indexCounter = 0;

    for (let o = 0; o < matrixOfIndices.length; o++) {

        for (let i = 0; i < matrixOfIndices[o].length; i++) {

            if (i === playerOneIndices[1] && (playerOneIndices[0] + 1 === o || playerOneIndices[0] - 1 === o || playerOneIndices[0] === o)) {
                if (matrixOfIndices[o][i + 1] !== undefined && matrixOfIndices[o][i + 1] !== 'two') {
                    arrOfCells[indexCounter + 1].style.background = 'lightgreen';
                }
                if (matrixOfIndices[o][i - 1] !== undefined && matrixOfIndices[o][i - 1] !== 'two') {
                    arrOfCells[indexCounter - 1].style.background = 'lightgreen';
                }
                if (matrixOfIndices[o][i] !== 'two' && (playerOneIndices[0] + 1 === o || playerOneIndices[0] - 1 === o)) {
                    arrOfCells[indexCounter].style.background = 'lightgreen';
                }
            }

            indexCounter++;
        }

    }

    console.log(matrixOfIndices);

}

const submitElement = document.getElementById('submitBtn');

let inpNum = undefined;
let counter = 0;

submitElement.addEventListener('click', e => {
    e.preventDefault();
    let divGridElement = document.querySelector('.grid');
    divGridElement.textContent = '';
    let inputNumber = document.getElementById('number').value;
    if (inputNumber % 2 === 0 || inputNumber < 2 || inputNumber > 20 || inputNumber === '') {
        return alert('You must enter an odd number!');
    }

    inpNum = inputNumber;
    boardCreation(inputNumber);
    let divContainerElement = document.querySelectorAll('.cell');
    divContainerElement = Array.from(divContainerElement);
    cellIndicesMatrix(divContainerElement.map(el => el.textContent), inpNum);
});


const startBtnElement = document.getElementById('startBtn');

startBtnElement.addEventListener('click', e => {
    e.preventDefault();

    const checkForBoard = document.querySelectorAll('.cell').length;
    let coordElement = document.getElementById('coord');
    if (checkForBoard > 0) {
        coordElement.style.display = 'inline-block';
    } else {
        alert('You must create the board first!');
    }
});


const divContainerElement = document.querySelector('.container');

divContainerElement.addEventListener('click', e => {
    if (e.target.classList[0] === 'cell') {
        const clickedCell = e.target;
        movingPlayers(clickedCell);
    }
});