import { _objectSpread2 } from "../../../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
import { debounce } from "./utils.js";
import { useCallback, useEffect, useMemo, useState } from "react";
//#region src/plus/productSelect/components/TabsStructure/hooks.ts
/**
* Hook for managing selection indicator position with enhanced features
* @param containerRef - Ref to the tab container
* @param selectedTabId - ID of the currently selected tab (optional)
* @param transition - Custom transition string (optional)
* @returns Selection indicator props and list container props
*/
function useSelectionIndicator(containerRef, selectedTabId, transition) {
	const [indicatorStyle, setIndicatorStyle] = useState({
		width: 0,
		transform: "translateX(0)",
		transition: "none"
	});
	const [selectedTabRef, setSelectedTabRef] = useState();
	const [isFocusVisible, setIsFocusVisible] = useState(false);
	const [focusRingClasses, setFocusRingClasses] = useState("");
	const setSelectedTab = useCallback((element) => {
		setSelectedTabRef((prevRef) => (prevRef === null || prevRef === void 0 ? void 0 : prevRef.current) === element ? prevRef : { current: element });
	}, []);
	const findSelectedTabByAttribute = useCallback(() => {
		if (!containerRef.current) return null;
		const selectedTab = containerRef.current.querySelector("[role=\"tab\"][aria-selected=\"true\"]");
		if (selectedTab) setSelectedTab(selectedTab);
		return selectedTab;
	}, [containerRef, setSelectedTab]);
	const findSelectedTabById = useCallback(() => {
		if (!selectedTabId || !containerRef.current) return null;
		return containerRef.current.querySelector(`[id="${selectedTabId}"]`);
	}, [containerRef, selectedTabId]);
	const getTransition = useCallback((customTransition) => {
		return customTransition || "transform 300ms, width 100ms";
	}, []);
	const getDirection = useCallback(() => {
		if (!containerRef.current) return "ltr";
		return window.getComputedStyle(containerRef.current).direction || "ltr";
	}, [containerRef]);
	const updateIndicatorPosition = useCallback(() => {
		try {
			const selectedTab = findSelectedTabByAttribute() || findSelectedTabById();
			if (!selectedTab || !containerRef.current) {
				setIndicatorStyle((prev) => _objectSpread2(_objectSpread2({}, prev), {}, {
					width: 0,
					transform: "translateX(0)"
				}));
				return;
			}
			containerRef.current;
			const offsetParent = selectedTab.offsetParent;
			if (!offsetParent) {
				setIndicatorStyle((prev) => _objectSpread2(_objectSpread2({}, prev), {}, {
					width: 0,
					transform: "translateX(0)"
				}));
				return;
			}
			if (!selectedTab.isConnected) {
				console.warn("useSelectionIndicator: Selected tab is no longer connected to DOM");
				return;
			}
			const direction = getDirection();
			const width = selectedTab.offsetWidth;
			if (width <= 0) {
				setIndicatorStyle((prev) => _objectSpread2(_objectSpread2({}, prev), {}, {
					width: 0,
					transform: "translateX(0)"
				}));
				return;
			}
			let left;
			if (direction === "rtl") left = -1 * (offsetParent.clientWidth - selectedTab.offsetLeft - selectedTab.offsetWidth);
			else left = selectedTab.offsetLeft;
			const transitionValue = getTransition(transition);
			setIndicatorStyle({
				width: `${width}px`,
				transform: `translateX(${left}px)`,
				transition: transitionValue
			});
		} catch (error) {
			console.warn("useSelectionIndicator: Error updating indicator position:", error);
			setIndicatorStyle((prev) => _objectSpread2(_objectSpread2({}, prev), {}, {
				width: 0,
				transform: "translateX(0)"
			}));
		}
	}, [
		containerRef,
		selectedTabId,
		transition,
		findSelectedTabByAttribute,
		findSelectedTabById,
		getDirection,
		getTransition
	]);
	const debouncedUpdate = useMemo(() => debounce(updateIndicatorPosition, 50), [updateIndicatorPosition]);
	const handleFocusIn = useCallback((event) => {
		setIsFocusVisible(event.target instanceof HTMLElement && event.target.matches(":focus-visible"));
		setFocusRingClasses(event.target instanceof HTMLElement && event.target.matches(":focus-visible") ? "focus-visible" : "");
	}, []);
	const handleFocusOut = useCallback(() => {
		setIsFocusVisible(false);
		setFocusRingClasses("");
	}, []);
	const handleMouseDown = useCallback(() => {
		setIsFocusVisible(false);
		setFocusRingClasses("");
	}, []);
	useEffect(() => {
		debouncedUpdate();
	}, [debouncedUpdate, selectedTabId]);
	useEffect(() => {
		const container = containerRef.current;
		if (!container) return;
		let resizeObserver = null;
		try {
			resizeObserver = new ResizeObserver((entries) => {
				try {
					if (entries.filter((entry) => entry.target && entry.target.isConnected).length > 0) debouncedUpdate();
				} catch (error) {
					console.warn("useSelectionIndicator: Error in ResizeObserver callback:", error);
				}
			});
			resizeObserver.observe(container);
			if (selectedTabRef === null || selectedTabRef === void 0 ? void 0 : selectedTabRef.current) resizeObserver.observe(selectedTabRef.current);
		} catch (error) {
			console.warn("useSelectionIndicator: Failed to create ResizeObserver:", error);
		}
		return () => {
			if (resizeObserver) try {
				resizeObserver.disconnect();
			} catch (error) {
				console.warn("useSelectionIndicator: Error disconnecting ResizeObserver:", error);
			}
		};
	}, [
		containerRef,
		selectedTabRef,
		debouncedUpdate
	]);
	useEffect(() => {
		const container = containerRef.current;
		if (!container) return;
		const nativeFocusIn = (event) => {
			handleFocusIn(_objectSpread2(_objectSpread2({}, event), {}, {
				currentTarget: event.currentTarget,
				target: event.target
			}));
		};
		container.addEventListener("focusin", nativeFocusIn);
		container.addEventListener("focusout", handleFocusOut);
		container.addEventListener("mousedown", handleMouseDown);
		return () => {
			container.removeEventListener("focusin", nativeFocusIn);
			container.removeEventListener("focusout", handleFocusOut);
			container.removeEventListener("mousedown", handleMouseDown);
		};
	}, [
		containerRef,
		handleFocusIn,
		handleFocusOut,
		handleMouseDown
	]);
	return {
		selectionIndicatorProps: {
			focusRingClasses,
			isFocusVisible,
			style: _objectSpread2(_objectSpread2({}, indicatorStyle), {}, { transition: getTransition(transition) })
		},
		listContainerProps: {
			onFocus: handleFocusIn,
			onBlur: handleFocusOut,
			onMouseDown: handleMouseDown
		}
	};
}
//#endregion
export { useSelectionIndicator };
