// Funzione goBack
window.goBack = function () {
    console.log("goBack");
    history.back();
};

// Funzione per monitorare bottom-sheet-container e gestire la navbar
function monitorBottomSheetClass(mutations) {
    const bottomSheet = document.querySelector(".bottom-sheet-container");
    const navbar = document.querySelector(".animated-navbar");

    if (!bottomSheet || !navbar) return;

    mutations.forEach(function (mutation) {
        if (mutation.type === 'attributes' && mutation.attributeName === 'class' && mutation.target === bottomSheet) {
            if (bottomSheet.classList.contains("show")) {
                navbar.classList.remove("show-nav");
                navbar.classList.add("hide-nav");
                console.log("Navbar nascosta (hide-nav)");
            } else {
                navbar.classList.remove("hide-nav");
                navbar.classList.add("show-nav");
                console.log("Navbar mostrata (show-nav)");
            }
        }
    });
}

// Esegui la funzione tabindex inizialmente
addTabindexToButtons();

// Observer combinato per tutte le funzionalità
const observer = new MutationObserver((mutations) => {
    // Aggiungi tabindex ai nuovi bottoni
    addTabindexToButtons();

    // Monitora bottom-sheet-container
    monitorBottomSheetClass(mutations);
});

// Osserva sia i cambiamenti nel DOM che gli attributi
observer.observe(document.body, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['class']
});

// Sync iniziale per la navbar (nel caso la pagina parte già con .show)
document.addEventListener("DOMContentLoaded", () => {
    const bottomSheet = document.querySelector(".bottom-sheet-container");
    const navbar = document.querySelector(".animated-navbar");

    if (bottomSheet && navbar) {
        if (bottomSheet.classList.contains("show")) {
            navbar.classList.remove("show-nav");
            navbar.classList.add("hide-nav");
        } else {
            navbar.classList.remove("hide-nav");
            navbar.classList.add("show-nav");
        }
    }
});


(function () {
    // Ascoltiamo l'evento 'mousedown' su tutto il documento
    document.addEventListener('mousedown', function (event) {

        // Cerca se l'elemento cliccato (o un suo genitore) ha la classe .ripple-container
        const target = event.target.closest('.ripple-container');

        if (target) {
            createRipple(event, target);
        }
    });

    function createRipple(event, element) {
        const circle = document.createElement("span");
        const diameter = Math.max(element.clientWidth, element.clientHeight);
        const radius = diameter / 2;

        const rect = element.getBoundingClientRect();

        circle.style.width = circle.style.height = `${diameter}px`;
        circle.style.left = `${event.clientX - rect.left - radius}px`;
        circle.style.top = `${event.clientY - rect.top - radius}px`;
        circle.classList.add("ripple");

        // Rimuovi l'elemento dal DOM alla fine dell'animazione per non intasare la memoria
        const ripple = element.getElementsByClassName("ripple")[0];
        if (ripple) {
            ripple.remove();
        }

        element.appendChild(circle);

        // Pulizia automatica dopo 600ms (durata animazione CSS)
        setTimeout(() => {
            circle.remove();
        }, 600);
    }
})();