/**
 Ces fonctions permettent d'ajouter du scroll au menu de gauche seulement quand : 
   * le contenu est en train de flotter grace à sa position sticky après un scroll vers le bas
   * que le contenu du menu est plus grand que la hauteur de l'écran

 Des sentinels dans le menu (deux divs de 1px) permettent de savoir quand le contenu commence et arrete de flotter.
 */
function enableScrollOnStickyElement() {
    const container = document.getElementById("left-menu-sticky-container");
    const sticky = document.getElementById("left-menu-sticky-element");
    return (
        sticky.offsetHeight > window.innerHeight &&
        container.offsetHeight > sticky.offsetHeight + 100
    );
}

function listenToLeftMenuForStickyElement() {
    if (enableScrollOnStickyElement() === false) {
        return;
    }
    const sticky = document.getElementById("left-menu-sticky-element");
    const topSentinel = document.getElementById("left-menu-top-sentinel");
    const bottomSentinel = document.getElementById("left-menu-bottom-sentinel");

    const topObserver = new IntersectionObserver(
        ([entry]) => {
            sticky.classList.toggle("is-stuck", !entry.isIntersecting);
        },
        { threshold: 0 },
    );

    let bottomHasBeenVisible = false;
    const bottomObserver = new IntersectionObserver(
        ([entry]) => {
            if (entry.isIntersecting) bottomHasBeenVisible = true;
            if (bottomHasBeenVisible)
                sticky.classList.toggle("is-stuck", !entry.isIntersecting);
        },
        { threshold: 1 },
    );

    topObserver.observe(topSentinel);
    bottomObserver.observe(bottomSentinel);
}

document.addEventListener("DOMContentLoaded", listenToLeftMenuForStickyElement);
