//------------------ Variables ------------------//
let p_counter = 0;
let texts = document.getElementsByClassName("textWillAppear");
let questions = document.getElementsByClassName('questionWillAppear');
let button = document.getElementById("button1");
let friendInput = document.getElementById("friendInput");
let friendPseudo = '';
let inputBox = document.getElementById("inputBox");
let errorMsg = inputBox.childNodes[1];
let buttonBox = document.getElementById("buttons");
let arrow = document.getElementById("arrow");
let space = document.getElementById("space");

let NB_TEXTS = texts.length;
let NB_QUESTIONS = questions.length;
let NB_BUTTONS = 1;
let NB_ELEMENTS_TO_APPEAR = NB_TEXTS + NB_QUESTIONS + NB_BUTTONS;

//------------------ Fonctions ------------------//

//gère les apparitions et disparitions des textes
function makeNextTextAppear(event) {
    if (p_counter < NB_ELEMENTS_TO_APPEAR) {
        if (event.keyCode == 13 || event.keyCode == 32) {
            if(p_counter < 1) {
                texts[p_counter].style.cssText = "animation: fade 2s forwards;";
            }
            if (p_counter >= 1 && p_counter < 5) {
                questions[p_counter-1].style.cssText = "animation: fade 2s forwards;";
            }
            if(p_counter >= 5 && p_counter < 7) {
                texts[p_counter-NB_QUESTIONS].style.cssText = "animation: fade 2s forwards;";
            }
            if(p_counter == 7) {
                button.style.cssText = "animation: fade 2s forwards;";
                arrow.style.cssText = "animation: fade-reverse 2s forwards;"
                space.style.cssText = "animation: fade-reverse 2s forwards;"
            }
            p_counter += 1;
        }
    }
}

function handleInputChange (event) {
    friendPseudo = event.target.value;
    console.log(friendPseudo);
}

//fonction pour gérer le bouton (qui est en fait un lien customisé)
function handleButtonClicked(event) {
    if (friendPseudo) {
        errorMsg.innerHTML = '';
        localStorage.setItem("friendPseudo", friendPseudo);
        button.setAttribute('href', './couloir_ami.html');
        button.click();
    } else {
        button.removeAttribute('href');
        errorMsg.innerHTML = "Entrez un pseudo !";
        errorMsg.style.cssText = "color: #BF0909; font-size: 2vh";
    }
}

//------------------ Gestion events ------------------//
document.addEventListener("keypress", makeNextTextAppear);
friendInput.addEventListener("input", handleInputChange);
button.addEventListener("click", handleButtonClicked);