import { jsx } from 'react/jsx-runtime';
import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
import { useContext, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
import { cn } from '../../../utils/cn.js';
import { useClickOutside } from '../../../hooks/useClickOutside.js';
import { contentVariants } from './ColorPicker.animations.js';
import { ColorPickerContext } from './ColorPicker.js';
import { useIsClient } from '../../../hooks/useIsClient.js';

/**
 * ColorPickerBody - Popover content wrapper following Dropdown/Select patterns
 * Uses portal rendering and useSelectPortal for positioning
 */
const ColorPickerBody = ({ children, className, portal = true, animation = true, ...rest }) => {
    const context = useContext(ColorPickerContext);
    const contentRef = useRef(null);
    const shouldReduceMotion = useReducedMotion();
    const isClient = useIsClient();
    if (!context) {
        throw new Error('ColorPicker.Body must be used within a ColorPicker');
    }
    const { isOpen, setIsOpen, theme, triggerRef, placement, offset } = context;
    // Use positioning hook (same as Dropdown/Select)
    const { position, cssVariables } = useSelectPortal({
        triggerRef,
        isOpen: isOpen || false,
        placement,
        offset: offset || 4,
        autoWidth: false,
    });
    // Click outside to close (same as Dropdown)
    useClickOutside(contentRef, (e) => {
        var _a;
        if (e.target === triggerRef.current || ((_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
            return;
        }
        setIsOpen(false);
    });
    // Handle Escape key
    useEffect(() => {
        if (!isOpen)
            return;
        const handleEscape = (event) => {
            var _a;
            if (event.key === 'Escape') {
                setIsOpen(false);
                (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            }
        };
        document.addEventListener('keydown', handleEscape);
        return () => document.removeEventListener('keydown', handleEscape);
    }, [isOpen, setIsOpen, triggerRef]);
    // Extract DOM event handler props that conflict with Framer Motion
    const { onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...domProps } = rest;
    const content = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: contentRef, role: "dialog", "aria-label": "Color picker", className: cn('fixed z-50', theme.contentStyle, className), style: {
                ...cssVariables,
                top: `${position.top}px`,
                left: `${position.left}px`,
            }, variants: shouldReduceMotion || !animation ? {} : contentVariants, initial: shouldReduceMotion || !animation ? undefined : 'hidden', animate: shouldReduceMotion || !animation ? undefined : 'visible', exit: shouldReduceMotion || !animation ? undefined : 'exit', transition: shouldReduceMotion || !animation
                ? { duration: 0 }
                : {
                    type: 'spring',
                    stiffness: 500,
                    damping: 30,
                }, "data-state": isOpen ? 'open' : 'closed', ...domProps, children: children })) }));
    // Use portal if specified (same as Dropdown)
    return portal && isClient
        ? createPortal(content, document.body)
        : content;
};
ColorPickerBody.displayName = 'ColorPicker.Body';

export { ColorPickerBody };
