import { jsx } from 'react/jsx-runtime';
import React__default, { useRef, useState } from 'react';
import classNames from '../../../_virtual/index.js';

const ColorBarSelector = React__default.forwardRef(({ getColorValue, disabled, initialColor }, ref) => {
    const colorInputRef = useRef(null);
    React__default.useImperativeHandle(ref, () => colorInputRef.current);
    const [color, setColor] = useState(initialColor); // Needed hexacode for backend
    const handleColorClick = () => {
        if (colorInputRef.current && !disabled) {
            colorInputRef.current.click();
        }
    };
    return (jsx("div", { className: classNames('ff-excel-color-selector', {
            'color-selector-disabled': disabled,
        }), style: { backgroundColor: color }, onClick: handleColorClick, children: jsx("input", { type: "color", disabled: disabled, className: classNames('ff-excel-color-selector-picker', {
                'color-selector-disabled': disabled,
            }), ref: colorInputRef, onChange: (e) => {
                setColor(e.target.value);
                getColorValue(e.target.value.replace('#', ''));
            } }) }));
});
ColorBarSelector.displayName = 'ColorBarSelector';

export { ColorBarSelector as default };
//# sourceMappingURL=ColorBarSelector.js.map
