import { jsx as _jsx } from "react/jsx-runtime";
import { useRef, useState } from 'react';
import './ColorBarSelector.scss';
import classNames from 'classnames';
const ColorBarSelector = ({ getColorValue, disabled, initialColor, }) => {
    const colorInputRef = useRef(null);
    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('#', ''));
            } }) }));
};
export default ColorBarSelector;
//# sourceMappingURL=ColorBarSelector.js.map