// import "requestidlecallback-polyfill";

const stuckClass = "gtm-stuck";

const stickyHeaderResizeCb = (entries) => {
	for (const entry of entries) {
		entry.target.style.setProperty(
			"--gtm-stuck-height",
			entry.contentRect.height + "px"
		);
	}
};

const stickyHeaderIntersectionCb = (entries) => {
	for (const entry of entries) {
		const isStuck = entry.boundingClientRect.bottom < entry.rootBounds.top;
		entry.target.classList.toggle(stuckClass, isStuck);
	}
};

export const initStickyHeader = () => {
	const targetEl = document.querySelectorAll(".gtm-header-sticky-wrapper");
	stickyHeader(targetEl);
};

export const stickyHeader = (els) => {
	const options = {
		// root: document.querySelector('[data-scroll-root]'),
		// rootMargin: '0px',
		// threshold: 1.0
	};

	const intersectionOb = new IntersectionObserver(
		stickyHeaderIntersectionCb,
		options
	);
	const resizeOb = new ResizeObserver(stickyHeaderResizeCb);

	els.forEach((el) => {
		intersectionOb.observe(el);
		resizeOb.observe(el);
	});
};