import React from 'react';
import Input from '../Input';
import { st, classes } from './ColorPickerConverter.st.css.js';
import ColorPickerConverterViewer from './ColorPickerConverterViewer';
import { safeColor, getHexOrEmpty, stopPropagation } from './utils';
export default class ColorPickerConverterHex extends React.PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            hex: getHexOrEmpty(this.props.current),
            inFocus: false,
        };
        this.change = ({ target: { value } }) => {
            this.setState({ hex: value }, () => {
                const _color = safeColor(value, this.props.allowEmpty);
                if (_color) {
                    this.props.onChange(_color);
                }
            });
        };
        this.handleOnFocus = () => {
            this.setState({
                inFocus: true,
            });
        };
        this.handleOnBlur = () => {
            this.setState({
                inFocus: false,
                hex: getHexOrEmpty(this.props.current),
            });
        };
        this.handleKeyDown = event => {
            const { key } = event;
            if (key === 'Enter') {
                this.props.onEnter();
            }
        };
    }
    render() {
        const { dataHook } = this.props;
        return (React.createElement("div", { className: st(classes.colorConverterWrapper), "data-hook": dataHook },
            React.createElement(Input, { size: "medium", value: this.state.hex, placeholder: this.props.placeholder, onChange: this.change, onFocus: this.handleOnFocus, onBlur: this.handleOnBlur, onKeyDown: this.handleKeyDown, className: classes.colorInput, onInputClicked: stopPropagation }),
            React.createElement(ColorPickerConverterViewer, { ...this.props, color: this.props.current })));
    }
    UNSAFE_componentWillReceiveProps(props) {
        const hex = getHexOrEmpty(props.current);
        if (!this.state.inFocus && this.state.hex !== hex) {
            this.setState({
                hex,
            });
        }
    }
}
//# sourceMappingURL=ColorPickerConverterHex.js.map