class GtmScrollHandler {
	constructor() {
		this.scrollHandler = this.scrollHandler.bind(this);
		this.triggerScroll = this.triggerScroll.bind(this);

		// Init
		this.prevOffset = window.pageYOffset;

		// Setup scroll handler
		window.addEventListener("scroll", this.scrollHandler, {
			passive: true,
		});

		// Trigger for current inview items at page load
		window.addEventListener("DOMContentLoaded", this.scrollHandler);
	}

	scrollHandler(e) {
		let direction;

		if (window.pageYOffset >= this.prevOffset) {
			direction = "down";
		} else {
			direction = "up";
		}

		this.prevOffset = window.pageYOffset;
		this.triggerScroll(direction);
	}

	triggerScroll(direction = "down") {
		let event = new CustomEvent("gtmScrolling", {
			detail: { direction }, // Can access by e.detail.direction
		});

		window.dispatchEvent(event);
	}
}

const stuckClass = "gtm-header-stuck";
const stuckUpClass = "gtm-header-stuck-up";
const stuckDownClass = "gtm-header-stuck-down";

export const initScrollHandler = () => {
	if (!window.gtmScrollHandler) {
		window.gtmScrollHandler = new GtmScrollHandler();
	}
};

export function headerSticky(selector) {
	initScrollHandler();

	const divs = document.querySelectorAll(selector);
	divs.forEach((el) => {
		window.addEventListener(
			"gtmScrolling",
			(e) => {
				const isUp = e.detail.direction == "up";
				el.classList.toggle(stuckUpClass, isUp);
				el.classList.toggle(stuckDownClass, !isUp);

				let isStuck = window.pageYOffset > el.getBoundingClientRect().bottom;
				el.classList.toggle(stuckClass, isStuck);
			},
			{
				passive: true,
			}
		);
	});
}