import { Elevent } from "/assets/js/modules/npm/Elevent.mjs";

export const TARGET_SELECTOR = "[data-hover]";

export class Hoverpop {
	/**
	 * Bind hover targets on provided Elevent-compatible element(s)
	 * @param {HTMLElement|HTMLElements|string} elements 
	 */
	constructor(elements) {
		// Bind hover targets on element(s)
		new Elevent("mouseenter", elements, (event) => {
			const element = event.target.querySelector(TARGET_SELECTOR);

			// Bail out if target element contains no hover target element
			if (!element) {
				return;
			}
		
			element.classList.add("hovering");
			event.target.addEventListener("mousemove", (event) => {
				const x = event.layerX - (element.clientWidth / 2);
				const y = event.layerY + element.clientHeight;
		
				element.style.setProperty("transform", `translate(${x}px, ${y}px)`);
			});
		});

		// Bind hover leave targets on element(s)
		new Elevent("mouseleave", elements, () => elements.forEach(element => element.querySelector(TARGET_SELECTOR)?.classList.remove("hovering")));
	}
}