import { jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { tabsTheme } from './Tabs.theme.js';
import { useTabsContext } from './TabsContext.js';
import { getTabsBodyVariants } from './Tabs.animations.js';

/**
 * TabsBody component displays content panels for tabs with directional fade animations
 */
const TabsBody = React__default.forwardRef(({ value, forceMount = false, children, className, ...props }, ref) => {
    const { value: selectedValue, orientation } = useTabsContext();
    const shouldReduceMotion = useReducedMotion();
    // Check if we're in Storybook and should disable animations
    const isInStorybook = typeof window !== 'undefined' && window.__STORYBOOK_DISABLE_ANIMATIONS__;
    const shouldDisableAnimations = !!shouldReduceMotion || !!isInStorybook;
    const isSelected = value === selectedValue;
    const shouldRender = forceMount || isSelected;
    // Compute animation variants without a global cache (HMR-safe)
    const contentVariants = useMemo(() => getTabsBodyVariants(shouldDisableAnimations), [shouldDisableAnimations]);
    // For forceMount, we handle visibility differently to preserve DOM
    if (forceMount) {
        return (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, !isSelected && "hidden", // Hide when not selected but force mounted
            className // User overrides take precedence
            ), "data-state": isSelected ? "active" : "inactive", "data-orientation": orientation, style: {
                // Ensure proper stacking context for animations
                position: "relative",
            }, ...props, children: children }));
    }
    // Standard behavior with AnimatePresence for enter/exit animations
    if (!shouldRender) {
        return null;
    }
    // Determine animation props (user props will override due to spread order)
    const animationProps = shouldDisableAnimations ? {} : {
        initial: "initial",
        animate: "animate",
        exit: "exit",
        variants: contentVariants,
    };
    return (jsx(AnimatePresence, { mode: "wait", children: isSelected && (jsx(motion.div, { ref: ref, role: "tabpanel", "aria-labelledby": `${value}-tab`, id: `${value}-content`, tabIndex: 0, className: cn(tabsTheme.bodyStyle, className // User overrides take precedence
            ), "data-state": "active", "data-orientation": orientation, style: {
                // Ensure proper stacking context for animations
                position: "relative",
            }, ...animationProps, ...props, children: children }, `content-${value}`)) }));
});
TabsBody.displayName = "Tabs.Body";

export { TabsBody };
