// Element du DOM

const divVies = document.querySelector('.vies');
const message = document.getElementById("message");
const formulaire = document.getElementById('inputBox');
const input = document.getElementById('number');
const essayerbtn = document.getElementById('essayerBtn');
const rejouebtn = document.getElementById('rejouer');
const body = document.getElementsByTagName('body')[0];

// Modèle des coeurs

const coeurvide = '<ion-icon name="heart-outline"></ion-icon>';
const coeurplein = '<ion-icon name="heart"></ion-icon>';

// Fond

const froid = 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)';
const tiede = 'linear-gradient(to top, #fddb92 0%, #d1fdff 100%)';
const chaud = 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)';
const treschaud = 'linear-gradient(to top, #ff0844 0%, #ffb199 100%)';

const win = ' linear-gradient(to right, #f83600 0%, #f9d423 100%)';
const loose = ' linear-gradient(to top, #e6b980 0%, #eacda3 100%)';

// Play

const play = () => {
    const randomNumber = Math.floor(Math.random() * 501);
    const totalVies = 11;
    let vies = totalVies;

    // Ajout de l'affichage initial des essais restants
    const essaisRestantsSpan = document.getElementById("essaisRestants");
    essaisRestantsSpan.textContent = vies;

    console.log(randomNumber);

    // Actualisation à chaque essaie
    formulaire.addEventListener('submit', (e) => {
        e.preventDefault();
        const valeurInput = parseInt(input.value);

        if (valeurInput < 0 || valeurInput > 501) return;

        if (valeurInput === randomNumber) {
            body.style.backgroundImage = win;
            message.textContent = `Bravo! Le nombre était bien ${randomNumber}.`;
            rejouebtn.style.display = "block";
            essayerbtn.setAttribute("disabled", "");
        } else {
            if (randomNumber < valeurInput + 3 && randomNumber > valeurInput - 3) {
                body.style.backgroundImage = treschaud;
                message.textContent = "C'est brulant!!!🔥🔥🔥";
            } else if (randomNumber < valeurInput + 6 && randomNumber > valeurInput - 6) {
                body.style.backgroundImage = chaud;
                message.textContent = "C'est Chaud!🔥";
            } else if (randomNumber < valeurInput + 11 && randomNumber > valeurInput - 11) {
                body.style.backgroundImage = tiede;
                message.textContent = "C'est tiède😑";
            } else {
                body.style.backgroundImage = froid;
                message.textContent = "C'est froid🥶";
            }
            vies--;
            verifyLoose();
        }

        actualiseCoeurs(vies);
    });

    const verifyLoose = () => {
        essaisRestantsSpan.textContent = vies;

        if (vies === 0) {
            body.style.backgroundImage = loose;
            body.style.color = '#990000';
            essayerbtn.setAttribute("disabled", "");
            message.textContent = `Vous avez perdu, le nombre était ${randomNumber}.`;
            rejouebtn.style.display = "block";
        }
    };

    const actualiseCoeurs = (vies) => {
        divVies.innerHTML = "";
        let tableauVies = [];
        for (let i = 0; i < vies; i++) {
            tableauVies.push(coeurplein);
        }
        for (let i = 0; i < totalVies - vies; i++) {
            tableauVies.push(coeurvide);
        }
        tableauVies.forEach(coeur => {
            divVies.innerHTML += coeur;
        });
    };
    actualiseCoeurs(vies);

    rejouebtn.addEventListener('click', () => {
        message.style.display = "block";
        document.location.reload(true);
    });
};

play();