import { PINNED_CLASS, PIN_OFFSET_PX } from "#configuration/constants/tab.constants";
import type { Disposer } from "#types/base.types";

export const observePin = function observePin(scroller: HTMLElement, anchor: HTMLElement, tabs: HTMLElement): Disposer {
    let threshold = 0;
    let measured = false;
    const onScroll = function onScroll(): void {
        if (!measured && anchor.isConnected) {
            threshold = anchor.offsetTop - PIN_OFFSET_PX;
            measured = true;
        }
        tabs.classList.toggle(PINNED_CLASS, measured && scroller.scrollTop > threshold);
    };
    scroller.addEventListener("scroll", onScroll, { passive: true });
    return () => {
        scroller.removeEventListener("scroll", onScroll);
    };
};