'use client';


import { useEffect, useState } from "react";

//#region src/hooks/useItemSelector.ts
const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false } = {
	selector: selectorDefault,
	isHoverable: false
}) => {
	const [choiceIndicatorPosition, setChoiceIndicatorPosition] = useState(null);
	const [hoveredItem, setHoveredItem] = useState(null);
	const itemsLength = optionsRefs.current.length;
	const calculatePosition = () => {
		let targetElement = null;
		if (hoveredItem) targetElement = hoveredItem;
		else targetElement = optionsRefs.current.find(selector) ?? null;
		if (!targetElement) {
			setChoiceIndicatorPosition((prev) => ({
				left: 0,
				width: 0,
				...prev,
				opacity: 0
			}));
			return;
		}
		const left = targetElement.offsetLeft;
		const width = targetElement.offsetWidth;
		setChoiceIndicatorPosition({
			left,
			width,
			opacity: 1
		});
	};
	useEffect(() => {
		calculatePosition();
		window.addEventListener("resize", calculatePosition);
		window.addEventListener("DOMContentLoaded", calculatePosition);
		const mutationObservers = [];
		optionsRefs.current.forEach((option) => {
			if (option) {
				const observer = new MutationObserver((mutations) => {
					for (const mutation of mutations) if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
						calculatePosition();
						break;
					}
				});
				observer.observe(option, {
					attributes: true,
					attributeFilter: ["aria-selected"]
				});
				mutationObservers.push(observer);
			}
		});
		const resizeObservers = [];
		const observeSize = (element) => {
			if (!element) return;
			const resizeObserver = new ResizeObserver(() => {
				calculatePosition();
			});
			resizeObserver.observe(element);
			resizeObservers.push(resizeObserver);
		};
		const selectedItem = optionsRefs.current.find(selector) ?? null;
		if (selectedItem) observeSize(selectedItem);
		if (hoveredItem) observeSize(hoveredItem);
		const handleMouseEnter = (event) => {
			setHoveredItem(event.currentTarget);
		};
		const handleMouseLeave = () => {
			setHoveredItem(null);
		};
		if (isHoverable) optionsRefs.current.forEach((option) => {
			option?.addEventListener("mouseenter", handleMouseEnter, { passive: true });
			option?.addEventListener("mouseleave", handleMouseLeave, { passive: true });
		});
		return () => {
			window.removeEventListener("resize", calculatePosition);
			window.removeEventListener("DOMContentLoaded", calculatePosition);
			mutationObservers.forEach((observer) => {
				observer.disconnect();
			});
			resizeObservers.forEach((observer) => {
				observer.disconnect();
			});
			optionsRefs.current.forEach((option) => {
				option?.removeEventListener("mouseenter", handleMouseEnter);
				option?.removeEventListener("mouseleave", handleMouseLeave);
			});
		};
	}, [
		optionsRefs,
		selector,
		hoveredItem,
		itemsLength
	]);
	return {
		choiceIndicatorPosition,
		calculatePosition
	};
};

//#endregion
export { useItemSelector };
//# sourceMappingURL=useItemSelector.mjs.map