'use client';

import { useEffect, useRef, useState } from "react";

//#region src/hooks/useItemSelector.ts
const selectorDefault = (option) => option?.getAttribute("aria-selected") === "true";
const useItemSelector = (optionsRefs, { selector = selectorDefault, isHoverable = false, orientation = "horizontal" } = {
	selector: selectorDefault,
	isHoverable: false,
	orientation: "horizontal"
}) => {
	const [choiceIndicatorPosition, setChoiceIndicatorPosition] = useState(null);
	const [hoveredItem, setHoveredItem] = useState(null);
	const hideTimeoutRef = useRef(null);
	const lastPositionRef = useRef(null);
	const itemsLength = optionsRefs.current.length;
	const calculatePosition = () => {
		let targetElement = null;
		if (hoveredItem) {
			targetElement = hoveredItem;
			if (hideTimeoutRef.current) {
				clearTimeout(hideTimeoutRef.current);
				hideTimeoutRef.current = null;
			}
		} else targetElement = optionsRefs.current.find(selector) ?? null;
		if (!targetElement) {
			if (orientation === "vertical") setChoiceIndicatorPosition((prev) => {
				const verticalPrev = prev;
				const newPosition = {
					top: verticalPrev?.top ?? 0,
					height: verticalPrev?.height ?? 0,
					opacity: 0
				};
				lastPositionRef.current = newPosition;
				return newPosition;
			});
			else setChoiceIndicatorPosition((prev) => {
				const horizontalPrev = prev;
				const newPosition = {
					left: horizontalPrev?.left ?? 0,
					width: horizontalPrev?.width ?? 0,
					opacity: 0
				};
				lastPositionRef.current = newPosition;
				return newPosition;
			});
			return;
		}
		if (orientation === "vertical") {
			const newPosition = {
				top: targetElement.offsetTop,
				height: targetElement.offsetHeight,
				opacity: 1
			};
			setChoiceIndicatorPosition(newPosition);
			lastPositionRef.current = newPosition;
		} else {
			const newPosition = {
				left: targetElement.offsetLeft,
				width: targetElement.offsetWidth,
				opacity: 1
			};
			setChoiceIndicatorPosition(newPosition);
			lastPositionRef.current = newPosition;
		}
	};
	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) => {
			if (hideTimeoutRef.current) {
				clearTimeout(hideTimeoutRef.current);
				hideTimeoutRef.current = null;
			}
			setHoveredItem(event.currentTarget);
		};
		const handleMouseLeave = () => {
			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
			hideTimeoutRef.current = setTimeout(() => {
				setHoveredItem(null);
			}, 150);
		};
		if (isHoverable) optionsRefs.current.forEach((option) => {
			option?.addEventListener("mouseenter", handleMouseEnter, { passive: true });
			option?.addEventListener("mouseleave", handleMouseLeave, { passive: true });
		});
		return () => {
			if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
			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,
		orientation
	]);
	return {
		choiceIndicatorPosition,
		calculatePosition,
		orientation
	};
};

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