import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// (C) 2007-2025 GoodData Corporation
import { Fragment, memo, useCallback } from "react";
import { Input } from "../../Form/Input.js";
import { getHexFromHslColor, getHslFromHexColor, isHexColorValid } from "../utils.js";
export const HexColorInput = memo(function HexColorInput(props) {
    const { initColor, onInputChanged, placeholder = "", label = "" } = props;
    const onInputChange = useCallback((value) => {
        const stringValue = String(value);
        if (isHexColorValid(stringValue)) {
            const newHsl = getHslFromHexColor(stringValue);
            onInputChanged(newHsl);
        }
    }, [onInputChanged]);
    const hexValue = getHexFromHslColor(initColor);
    return (_jsxs(Fragment, { children: [
            _jsx(Input, { className: "s-color-picker-hex", value: hexValue, onChange: onInputChange, placeholder: placeholder }), _jsx("p", { children: label })
        ] }));
});
