import { jsx } from 'react/jsx-runtime';
import { EyeDropperIcon } from '@heroicons/react/20/solid';
import { useContext } from 'react';
import { cn } from '../../../utils/cn.js';
import { Button } from '../../core/Button/Button.js';
import { ColorPickerContext } from './ColorPicker.js';
import { parseColor } from './colorUtils.js';

// Check if browser supports EyeDropper API
const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
/**
 * ColorPickerEyeDropper - Eyedropper tool to pick colors from screen
 * Uses browser EyeDropper API (if available)
 */
const ColorPickerEyeDropper = ({ className, ...props }) => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error('ColorPickerEyeDropper must be used within a ColorPicker');
    }
    const { setColor, disabled, theme } = context;
    const handleEyeDropper = async () => {
        if (!supportsEyeDropper || disabled)
            return;
        try {
            // @ts-expect-error - EyeDropper API is experimental
            const eyeDropper = new window.EyeDropper();
            const result = await eyeDropper.open();
            if (result === null || result === void 0 ? void 0 : result.sRGBHex) {
                const parsed = parseColor(result.sRGBHex);
                if (parsed) {
                    setColor(parsed);
                }
            }
        }
        catch (error) {
            // User cancelled or error occurred
            if (process.env.NODE_ENV !== 'production') {
                console.warn('[ColorPicker]: EyeDropper failed:', error);
            }
        }
    };
    // Don't render if browser doesn't support EyeDropper
    if (!supportsEyeDropper) {
        return null;
    }
    return (jsx(Button, { size: "sm", variant: "outline", color: "neutral", iconOnly: true, onClick: handleEyeDropper, disabled: disabled, "aria-label": "Pick color from screen", title: "Pick color from screen", className: cn(theme.eyedropperButtonStyle, className), children: jsx(EyeDropperIcon, { className: "size-4" }) }));
};
ColorPickerEyeDropper.displayName = 'ColorPickerEyeDropper';

export { ColorPickerEyeDropper };
