import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useState, useRef, useMemo, useEffect } from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { tabsTheme } from './Tabs.theme.js';
import { useTabsContext } from './TabsContext.js';
import { getUnderlineTransition } from './Tabs.animations.js';

/**
 * TabsList component displays the tab headers container with sliding underline
 */
const TabsList = React__default.forwardRef(({ children, className, ...props }, ref) => {
    const { value: activeValue, orientation, size } = useTabsContext();
    const shouldReduceMotion = useReducedMotion();
    // State for underline position and visibility
    const [underlinePosition, setUnderlinePosition] = useState(null);
    const [showUnderline, setShowUnderline] = useState(false);
    // Ref to access the list element for calculations
    const listRef = useRef(null);
    // Calculate underline position based on active tab
    const updateUnderlinePosition = useMemo(() => {
        return () => {
            if (!activeValue || !listRef.current) {
                setShowUnderline(false);
                return;
            }
            // Find the active trigger element
            const activeTrigger = listRef.current.querySelector(`[data-value="${activeValue}"]`);
            if (!activeTrigger) {
                setShowUnderline(false);
                return;
            }
            // Get the position relative to the list container
            const listRect = listRef.current.getBoundingClientRect();
            const triggerRect = activeTrigger.getBoundingClientRect();
            const left = triggerRect.left - listRect.left;
            const width = triggerRect.width;
            setUnderlinePosition({ left, width });
            setShowUnderline(true);
        };
    }, [activeValue]);
    // Update underline position when active value changes or on mount
    useEffect(() => {
        // Small delay to ensure DOM is updated
        const timeoutId = setTimeout(updateUnderlinePosition, 0);
        return () => clearTimeout(timeoutId);
    }, [updateUnderlinePosition]);
    // Handle window resize to recalculate positions
    useEffect(() => {
        const handleResize = () => {
            updateUnderlinePosition();
        };
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, [updateUnderlinePosition]);
    // Animation configuration for underline
    const underlineAnimation = useMemo(() => {
        return {
            initial: false,
            animate: underlinePosition ? {
                x: underlinePosition.left,
                width: underlinePosition.width,
            } : {
                x: 0,
                width: 0,
            },
            transition: getUnderlineTransition(shouldReduceMotion),
        };
    }, [underlinePosition, shouldReduceMotion]);
    return (jsxs("div", { ref: (node) => {
            listRef.current = node;
            if (typeof ref === 'function') {
                ref(node);
            }
            else if (ref) {
                ref.current = node;
            }
        }, role: "tablist", "aria-orientation": orientation, className: cn(tabsTheme.listStyle, className), "data-orientation": orientation, "data-size": size, ...props, children: [children, showUnderline && underlinePosition && (jsx(motion.div, { className: cn(tabsTheme.underlineStyle, "pointer-events-none" // Prevent interference with tab interactions
                ), style: {
                    position: 'absolute',
                    bottom: 0,
                }, ...underlineAnimation, "aria-hidden": "true" // Decorative element
             }))] }));
});
TabsList.displayName = "TabsList";

export { TabsList };
