import { jsx } from 'react/jsx-runtime';
import { useContext, useRef, useEffect } from 'react';
import { cn } from '../../../utils/cn.js';
import { Input } from '../Input/Input.js';
import '../Input/Input.theme.js';
import { ColorPickerContext } from './ColorPicker.js';
import { ColorPickerSwatch } from './ColorPickerSwatch.js';

/**
 * ColorPickerTrigger - Input field with color swatch
 * Uses standard Input component styling (like Select does)
 */
const ColorPickerTrigger = ({ className, ...props }) => {
    const context = useContext(ColorPickerContext);
    const inputRef = useRef(null);
    const wrapperRef = useRef(null);
    if (!context) {
        throw new Error('ColorPickerTrigger must be used within a ColorPicker');
    }
    const { isOpen, setIsOpen, disabled, state, getFormattedValue, triggerRef } = context;
    // Update triggerRef with the wrapper element for positioning
    useEffect(() => {
        if (wrapperRef.current) {
            triggerRef.current = wrapperRef.current;
        }
    }, [triggerRef]);
    const handleWrapperClick = (e) => {
        if (!disabled) {
            e.preventDefault();
            e.stopPropagation();
            setIsOpen(!isOpen);
        }
    };
    return (jsx("div", { ref: wrapperRef, onClick: handleWrapperClick, className: "relative", children: jsx(Input, { ref: inputRef, value: getFormattedValue(), readOnly: true, disabled: disabled, state: state, contentStart: jsx(ColorPickerSwatch, { size: "sm" }), className: cn('cursor-pointer pointer-events-none', className), "aria-expanded": isOpen, "aria-haspopup": "dialog", ...props }) }));
};
ColorPickerTrigger.displayName = 'ColorPickerTrigger';

export { ColorPickerTrigger };
