const headerLogoLight = "/assets/headerLogoLight.svg";
const headerLogoDark = "/assets/headerLogoDark.svg";

function toggleMenu(menu) {
    const element = document.getElementById(menu);
    if (!element) {
        console.error("The selected menu id doesn't exist");
        return;
    }
    if (element.classList.contains("active")) element.classList.remove("active");
    else element.classList.add("active");

    document.addEventListener("click", function close (event){
        const isClickInside = element.contains(event.target);
        if (!isClickInside) {
            element.classList.remove("active");
            document.removeEventListener("click", close);
        }
    });
}
function togglePasswordView(event, inputId) {
    const inputField = document.getElementById(inputId);
    const button = event.target;
    if (!inputField) {
        console.error("The selected input id doesn\'t exist");
        return;
    }
    if (inputField.type === "password") {
        inputField.setAttribute("type", "text");
        button.classList.remove("bi-eye-slash");
        button.classList.add("bi-eye");
    } else {
        inputField.setAttribute("type", "password");
        button.classList.add("bi-eye-slash");
        button.classList.remove("bi-eye");
    }
}
// function PopupCentrer(page,largeur,hauteur,option) {
//     var top=(screen.height-hauteur)/2;
//     var left=(screen.width-largeur)/2;
//     window.open(page,"",option+", width="+largeur+", height="+hauteur+", left="+left+", top="+top+"resizable=yes,scrollbars=yes");
// }


function PopupCentrer(page,largeur,hauteur,option) {
    const modal = document.createElement("div");
    modal.className = "modal";
    modal.id = "modalWindow";
    modal.innerHTML = `
    <div class="window">
        <button onclick="closeModal('modalWindow', true);" title="Fermer la fenêtre" aria-label="Fermer la fenêtre" class="windowCloseButton buttonPrimary justifyCenter"><span class="bi bi-x"></span></button>
        <iframe src="${page}" style="margin-top: 40px; height: 80vh;" width="100%" onload="const obj = this; obj.style.maxHeight = obj.contentWindow.document.documentElement.scrollHeight + 'px';"></iframe>
    </div>
    `;
    document.querySelector("body").appendChild(modal);
}
function closeModal(id, reloadPage) {
    try {
        if (typeof(id) != "string") throw new Error("Got invalid type or undefined/null argument");
        const element = document.getElementById(id);
        if (!element) throw new Error("Couldn't get element by id");
        element.remove();
        if (reloadPage === true) window.location.reload(); 
    } catch (error) {
        console.error("Failed to close modal : ", error);
    }
}

let transitionTime = 0;
function switchTheme() {
    transitionTime++;
    document.querySelector("body").style.transition = "color 1s linear, background-color 1s linear, border-color 1s linear";
    setTimeout(() => {
        if(transitionTime > 0) transitionTime--;
        if (transitionTime===0) document.querySelector("body").style.transition = "";
    }, 1000);
    
    let userTheme = localStorage.getItem("nasketTheme");
    if (userTheme == "lightTheme") switchToDarkMode(true);
    else switchToLightMode(true);
}
function switchToDarkMode(update = true) {
    try {
        buttons = [...document.getElementsByClassName("themeButton")];
        document.querySelector("body").classList.remove("lightTheme");
        buttons.forEach(element => element.className = element.className.replace("bi-moon-stars", "bi-sun"));

        document.getElementById("headerLogo").src = headerLogoDark;
        if (update) localStorage.setItem("nasketTheme", "darkTheme");
    } catch (error) {
        console.error("Problems happened when swithing themes", error);
    }
}
function switchToLightMode(update = true) {
    try {
        buttons = [...document.getElementsByClassName("themeButton")];
        document.querySelector("body").classList.add("lightTheme");
        buttons.forEach(element => element.className = element.className.replace("bi-sun", "bi-moon-stars"));

        // document.getElementById("headerLogo").style.filter = "invert() hue-rotate(180deg) brightness(0.45) saturate(2.8)";
        document.getElementById("headerLogo").src = headerLogoLight;
        if (update) localStorage.setItem("nasketTheme", "lightTheme");
    } catch (error) {
        console.error("Problems happened when swithing themes", error);
    }
}
const userFontSize = localStorage.getItem("nasketFontSize");
const userTheme = localStorage.getItem("nasketTheme");


    if (userTheme == "darkTheme") switchToDarkMode(false);
    else switchToLightMode(false);
if (userFontSize && parseInt(userFontSize) != NaN && userFontSize <= 20 && userFontSize >= 10) document.querySelector("body").style.fontSize = userFontSize + "px";
else localStorage.setItem("nasketFontSize", "12");