import React from 'react';
import Input from '../Input';
import { st, classes } from './ColorPickerConverter.st.css.js';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getRgbOrEmpty, stopPropagation } from './utils';
export default class ColorPickerConverterRGB extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = getRgbOrEmpty(this.props.current);
    }
    isInputsEmpty() {
        const { r, g, b } = this.state;
        return [r, g, b].every(value => value === '');
    }
    render() {
        const { dataHook } = this.props;
        return (React.createElement("div", { className: st(classes.colorConverterWrapper, {
                reducePadding: true,
            }), "data-hook": dataHook },
            React.createElement("div", { className: classes.distribute },
                React.createElement(Input, { size: "medium", value: this.state.r, onChange: e => this.change('r', e), placeholder: "R", className: classes.distributedItem, onInputClicked: stopPropagation }),
                React.createElement(Input, { size: "medium", value: this.state.g, onChange: e => this.change('g', e), placeholder: "G", className: classes.distributedItem, onInputClicked: stopPropagation }),
                React.createElement(Input, { size: "medium", value: this.state.b, onChange: e => this.change('b', e), placeholder: "B", className: classes.distributedItem, onInputClicked: stopPropagation })),
            React.createElement(ColorPickerConverterViewer, { ...this.props, color: this.props.current })));
    }
    UNSAFE_componentWillReceiveProps(props) {
        this.setState(getRgbOrEmpty(props.current));
    }
    change(part, { target: { value } }) {
        this.setState({ [part]: value }, () => {
            const isMissingData = this.state.r === '' || this.state.g === '' || this.state.b === '';
            const _color = safeColor(isMissingData && this.props.allowEmpty ? '' : this.state, this.props.allowEmpty);
            if (!isMissingData || this.isInputsEmpty()) {
                this.props.onChange(_color);
            }
        });
    }
}
//# sourceMappingURL=ColorPickerConverterRGB.js.map