import { jsx } from 'react/jsx-runtime';
import React__default from 'react';
import { useReducedMotion, motion } from 'motion/react';
import { cn } from '../../../utils/cn.js';
import { useCarouselContext } from './CarouselContext.js';
import { carouselTheme } from './Carousel.theme.js';

const CarouselBody = React__default.forwardRef(({ className, children, ...props }, ref) => {
    const { currentIndex, orientation, opts, scrollPrev, scrollNext } = useCarouselContext();
    const shouldReduceMotion = useReducedMotion();
    const internalRef = React__default.useRef(null);
    React__default.useImperativeHandle(ref, () => internalRef.current, []);
    const isHorizontal = orientation === 'horizontal';
    const translateValue = `${-currentIndex * 100}%`;
    const handleDragEnd = (_event, info) => {
        var _a;
        if (!opts.draggable)
            return;
        const dragDistance = isHorizontal ? info.offset.x : info.offset.y;
        const viewport = internalRef.current;
        if (!viewport)
            return;
        const viewportSize = isHorizontal
            ? viewport.offsetWidth
            : viewport.offsetHeight;
        const dragThreshold = viewportSize * ((_a = opts.dragThreshold) !== null && _a !== void 0 ? _a : 0.2);
        if (Math.abs(dragDistance) > dragThreshold) {
            if (dragDistance < 0) {
                scrollNext();
            }
            else {
                scrollPrev();
            }
        }
    };
    return (jsx("div", { ref: internalRef, className: cn(carouselTheme.viewport, className), ...props, children: jsx(motion.div, { className: cn(carouselTheme.container, isHorizontal ? 'flex-row' : 'flex-col'), drag: opts.draggable && (isHorizontal ? 'x' : 'y'), onDragEnd: handleDragEnd, dragElastic: 0.1, animate: {
                x: isHorizontal ? translateValue : 0,
                y: isHorizontal ? 0 : translateValue,
            }, transition: shouldReduceMotion
                ? { duration: 0 }
                : { type: 'spring', stiffness: 180, damping: 25, mass: 0.7 }, children: React__default.Children.map(children, (child, index) => {
                if (!React__default.isValidElement(child))
                    return child;
                return React__default.cloneElement(child, {
                    'aria-hidden': index !== currentIndex,
                });
            }) }) }));
});
CarouselBody.displayName = 'Carousel.Body';

export { CarouselBody };
