/** @license MIT | @cube-dev/ui-kit v0.142.7 | Cube Dev Team */
import { chainRaf } from "../../../utils/raf.js";
import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";

//#region src/components/navigation/Tabs/use-tab-indicator.ts
/**
* Hook to track and animate tab indicator position.
*
* Calculates the start position and size of the selection indicator
* along the orientation axis. Returns null if disabled (e.g., for
* non-default/narrow tab types).
*
* @param containerRef - Ref to the tab container element
* @param selectedKey - Currently selected tab key
* @param enabled - Whether the indicator should be shown
* @param orientation - Axis along which the indicator moves
* @param orderToken - Optional token that changes when tab order changes (triggers recalculation)
* @returns Indicator style (`start`, `size`) or null if disabled/not ready
*/
function useTabIndicator(containerRef, selectedKey, enabled, orientation = "horizontal", orderToken) {
	const [style, setStyle] = useState(null);
	const cancelRef = useRef(null);
	const updateIndicator = useCallback(() => {
		if (!enabled || !containerRef.current || selectedKey == null) {
			setStyle(null);
			return;
		}
		const selectedTab = containerRef.current.querySelector("[aria-selected=\"true\"]");
		if (!selectedTab) {
			setStyle(null);
			return;
		}
		const containerRect = containerRef.current.getBoundingClientRect();
		const tabRect = selectedTab.getBoundingClientRect();
		if (orientation === "vertical") {
			if (tabRect.height > 0) setStyle({
				start: tabRect.top - containerRect.top + containerRef.current.scrollTop,
				size: tabRect.height
			});
		} else if (tabRect.width > 0) setStyle({
			start: tabRect.left - containerRect.left + containerRef.current.scrollLeft,
			size: tabRect.width
		});
	}, [
		containerRef,
		selectedKey,
		enabled,
		orientation,
		orderToken
	]);
	useLayoutEffect(() => {
		if (cancelRef.current) cancelRef.current();
		cancelRef.current = chainRaf(() => {
			updateIndicator();
		}, 2);
		return () => {
			if (cancelRef.current) cancelRef.current();
		};
	}, [updateIndicator]);
	useEffect(() => {
		if (!enabled) return;
		const handleResize = () => updateIndicator();
		window.addEventListener("resize", handleResize);
		return () => window.removeEventListener("resize", handleResize);
	}, [enabled, updateIndicator]);
	useEffect(() => {
		if (!enabled) return;
		const container = containerRef.current;
		if (!container) return;
		const getAxisSize = (rect) => orientation === "vertical" ? rect.height : rect.width;
		let prevSize = getAxisSize(container.getBoundingClientRect());
		const observer = new ResizeObserver((entries) => {
			const entry = entries[0];
			if (!entry) return;
			const newSize = getAxisSize(entry.contentRect);
			if (prevSize === 0 && newSize > 0) updateIndicator();
			prevSize = newSize;
		});
		observer.observe(container);
		return () => observer.disconnect();
	}, [
		enabled,
		orientation,
		updateIndicator
	]);
	return enabled ? style : null;
}

//#endregion
export { useTabIndicator };
//# sourceMappingURL=use-tab-indicator.js.map