import { jsx, jsxs } from 'react/jsx-runtime';
import { useContext, useState } 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 { hslToRgb, parseColor } from './colorUtils.js';

/**
 * ColorPickerInput - Manual color value input
 * Supports hex, rgb, and hsl input based on selected format
 */
const ColorPickerInput = ({ className, ...props }) => {
    const context = useContext(ColorPickerContext);
    if (!context) {
        throw new Error("ColorPickerInput must be used within a ColorPicker");
    }
    const { color, setColor, format, theme, getFormattedValue } = context;
    const [inputValue, setInputValue] = useState(getFormattedValue());
    const [isInvalid, setIsInvalid] = useState(false);
    const handleChange = (e) => {
        const value = e.target.value;
        setInputValue(value);
        // Try to parse the color
        const parsed = parseColor(value);
        if (parsed) {
            setColor(parsed);
            setIsInvalid(false);
        }
        else {
            setIsInvalid(true);
        }
    };
    const handleBlur = () => {
        // Reset to current valid color if invalid
        if (isInvalid) {
            setInputValue(getFormattedValue());
            setIsInvalid(false);
        }
    };
    const handleKeyDown = (e) => {
        if (e.key === "Enter") {
            e.currentTarget.blur();
        }
    };
    // Render different input types based on format
    if (format === "hex") {
        return (jsx("div", { className: cn(theme.inputContainerStyle, className), ...props, children: jsx(Input, { type: "text", size: "sm", value: inputValue, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown, state: isInvalid ? "invalid" : "default", placeholder: "#000000", className: "flex-1 text-base font-mono", "aria-label": "Hex color value" }) }));
    }
    if (format === "rgb") {
        const rgb = hslToRgb(color.h, color.s, color.l);
        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.r, onChange: (e) => {
                        const newR = parseInt(e.target.value, 10);
                        if (!isNaN(newR) && newR >= 0 && newR <= 255) {
                            const parsed = parseColor(`rgb(${newR}, ${rgb.g}, ${rgb.b})`);
                            if (parsed)
                                setColor(parsed);
                        }
                    }, className: "flex-1 text-base", "aria-label": "Red", placeholder: "R" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.g, onChange: (e) => {
                        const newG = parseInt(e.target.value, 10);
                        if (!isNaN(newG) && newG >= 0 && newG <= 255) {
                            const parsed = parseColor(`rgb(${rgb.r}, ${newG}, ${rgb.b})`);
                            if (parsed)
                                setColor(parsed);
                        }
                    }, className: "flex-1 text-base", "aria-label": "Green", placeholder: "G" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 255, value: rgb.b, onChange: (e) => {
                        const newB = parseInt(e.target.value, 10);
                        if (!isNaN(newB) && newB >= 0 && newB <= 255) {
                            const parsed = parseColor(`rgb(${rgb.r}, ${rgb.g}, ${newB})`);
                            if (parsed)
                                setColor(parsed);
                        }
                    }, className: "flex-1 text-base", "aria-label": "Blue", placeholder: "B" })] }));
    }
    if (format === "hsl") {
        return (jsxs("div", { className: cn(theme.inputContainerStyle, "flex gap-2", className), ...props, children: [jsx(Input, { type: "number", size: "sm", min: 0, max: 360, value: Math.round(color.h), onChange: (e) => {
                        const newH = parseInt(e.target.value, 10);
                        if (!isNaN(newH) && newH >= 0 && newH <= 360) {
                            setColor({ ...color, h: newH });
                        }
                    }, className: "flex-1 text-base", "aria-label": "Hue", placeholder: "H" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.s), onChange: (e) => {
                        const newS = parseInt(e.target.value, 10);
                        if (!isNaN(newS) && newS >= 0 && newS <= 100) {
                            setColor({ ...color, s: newS });
                        }
                    }, className: "flex-1 text-base", "aria-label": "Saturation", placeholder: "S" }), jsx(Input, { type: "number", size: "sm", min: 0, max: 100, value: Math.round(color.l), onChange: (e) => {
                        const newL = parseInt(e.target.value, 10);
                        if (!isNaN(newL) && newL >= 0 && newL <= 100) {
                            setColor({ ...color, l: newL });
                        }
                    }, className: "flex-1 text-base", "aria-label": "Lightness", placeholder: "L" })] }));
    }
    return null;
};
ColorPickerInput.displayName = "ColorPickerInput";

export { ColorPickerInput };
