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

// Funzione per aggiungere tabindex ai bottoni
function addTabindexToButtons() {
    document.querySelectorAll('button.custom-plus-button').forEach(btn => {
        if (!btn.hasAttribute('tabindex')) {
            btn.setAttribute('tabindex', '0');
        }
    });
}

// Esegui la funzione tabindex inizialmente
addTabindexToButtons();

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

// 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);
    }
})();