let containerAllSquareDivs = document.querySelector(".container-all-square-divs");// Select the container
let userInput; // Squares number choice

// Bouton Reset
document.querySelector("#squares-number-button").addEventListener("click", resetGrid)


// Game beginning : Create a 16 squares grid
createSquaresGrid(16);

// Create squares grid
function createSquaresGrid(userInput) {
    // Fix the grid's columns and rows  number inside containerAllSquareDivs
    containerAllSquareDivs.style.setProperty("grid-template-columns", "repeat(" + userInput + ", auto)");
    containerAllSquareDivs.style.setProperty("grid-template-row", "repeat(" + userInput + ", auto)");

    // Create new squares and append them to the container
    for (let i = 0; i < userInput * userInput; i++) {
        let newSquareDiv = document.createElement("div");
        newSquareDiv.classList.add("new-square-divs");
        containerAllSquareDivs.appendChild(newSquareDiv);
    }

    // Select all created divs (array)
    let allSquareDivs = document.querySelectorAll(".new-square-divs");
    // "Greyshade effect" for all created divs

        for (let i = 0; i < userInput * userInput; i++) {
            let opacity = 0.1;

            allSquareDivs[i].addEventListener("mouseenter", function(){
            allSquareDivs[i].style.backgroundColor = "black";
            allSquareDivs[i].style.opacity = opacity;

            if (opacity < 1) {
                opacity += 0.1
                }
            })
        }

        // "Random colors effect" for all created divs when Random Colors Button clicked
    document.querySelector("#random-colors-button").addEventListener("click", function() {

        for (let i = 0; i < userInput * userInput; i++) {
            allSquareDivs[i].style.backgroundColor = "white";
            allSquareDivs[i].style.opacity = "1";
            allSquareDivs[i].classList.add("nopacity")
            allSquareDivs[i].addEventListener("mouseenter", getRandomColor);

        };
    })

    // Clear the grid from all colors
    let clearButton = document.querySelector("#clear-button")
        clearButton.addEventListener("click", function() {
            for (let i = 0; i < userInput * userInput; i++) {
                allSquareDivs[i].style.backgroundColor = "";
                allSquareDivs[i].style.opacity = "1";
        }
    })
}

// Fix a random color code (HEX)
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    this.style.backgroundColor = color;
}


// Reset the grid when Reset Button clicked
document.querySelector("#reset-button").addEventListener("click", function() {
    resetGrid()
    createSquaresGrid(16)
})

// Reset the grid
function resetGrid () {
    let containerAllSquareDivs = document.querySelector(".container-all-square-divs"); // Pourquoi ne pas pouvoir accéder à containerAllSquareDivs(1) et avoir à le redéfinir dans la fonction?

    // Remove all created divs inside the container
    while (containerAllSquareDivs.hasChildNodes()) {
        containerAllSquareDivs.removeChild(containerAllSquareDivs.lastChild);
    }
    //let userInput = prompt("Combien de carrés ?")
    let userInput = 5;
    createSquaresGrid(userInput)
}