import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, classNamesFunction } from '../../Utilities';
import { TextField } from '../../TextField';
import { ColorRectangle } from './ColorRectangle/ColorRectangle';
import { ColorSlider } from './ColorSlider/ColorSlider';
import { MAX_COLOR_HUE, getColorFromString, getColorFromRGBA, updateA, updateH, updateSV } from '../../utilities/color/colors';
var getClassNames = classNamesFunction();
var ColorPickerBase = /** @class */ (function (_super) {
    tslib_1.__extends(ColorPickerBase, _super);
    function ColorPickerBase(props) {
        var _this = _super.call(this, props) || this;
        _this._onSVChanged = function (s, v) {
            _this._updateColor(updateSV(_this.state.color, s, v));
        };
        _this._onHChanged = function (h) {
            _this._updateColor(updateH(_this.state.color, h));
        };
        _this._onAChanged = function (a) {
            _this._updateColor(updateA(_this.state.color, a));
        };
        _this._onHexChanged = function () {
            _this._updateColor(getColorFromString('#' + _this.hexText.value));
        };
        _this._onRGBAChanged = function () {
            _this._updateColor(getColorFromRGBA({
                r: Number(_this.rText.value),
                g: Number(_this.gText.value),
                b: Number(_this.bText.value),
                a: Number((_this.aText && _this.aText.value) || 100)
            }));
        };
        _this.state = {
            color: getColorFromString(props.color)
        };
        return _this;
    }
    ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.color) {
            this._updateColor(getColorFromString(newProps.color));
        }
    };
    ColorPickerBase.prototype.render = function () {
        var _this = this;
        var _a = this.props, theme = _a.theme, className = _a.className, styles = _a.styles;
        var color = this.state.color;
        var classNames = getClassNames(styles, {
            theme: theme,
            className: className
        });
        return (React.createElement("div", { className: classNames.root },
            React.createElement("div", { className: classNames.panel },
                React.createElement(ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
                React.createElement(ColorSlider, { className: "is-hue", minValue: 0, maxValue: MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
                !this.props.alphaSliderHidden && (React.createElement(ColorSlider, { className: "is-alpha", isAlpha: true, overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChanged: this._onAChanged })),
                React.createElement("table", { className: classNames.table, cellPadding: "0", cellSpacing: "0" },
                    React.createElement("thead", null,
                        React.createElement("tr", { className: classNames.tableHeader },
                            React.createElement("td", { className: classNames.tableHexCell }, this.props.hexLabel),
                            React.createElement("td", null, this.props.redLabel),
                            React.createElement("td", null, this.props.greenLabel),
                            React.createElement("td", null, this.props.blueLabel),
                            !this.props.alphaSliderHidden && React.createElement("td", null, this.props.alphaLabel))),
                    React.createElement("tbody", null,
                        React.createElement("tr", null,
                            React.createElement("td", null,
                                React.createElement(TextField, { className: classNames.input, value: color.hex, ref: function (ref) { return (_this.hexText = ref); }, onBlur: this._onHexChanged, spellCheck: false, ariaLabel: this.props.hexLabel })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return (_this.rText = ref); }, spellCheck: false, ariaLabel: this.props.redLabel })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return (_this.gText = ref); }, spellCheck: false, ariaLabel: this.props.greenLabel })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return (_this.bText = ref); }, spellCheck: false, ariaLabel: this.props.blueLabel })),
                            !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return (_this.aText = ref); }, spellCheck: false, ariaLabel: this.props.alphaLabel })))))))));
    };
    ColorPickerBase.prototype._updateColor = function (newColor) {
        if (!newColor) {
            return;
        }
        var onColorChanged = this.props.onColorChanged;
        if (newColor.str !== this.state.color.str) {
            this.setState({
                color: newColor
            }, function () {
                if (onColorChanged) {
                    onColorChanged(newColor.str);
                }
            });
        }
    };
    ColorPickerBase.defaultProps = {
        hexLabel: 'Hex',
        redLabel: 'Red',
        greenLabel: 'Green',
        blueLabel: 'Blue',
        alphaLabel: 'Alpha'
    };
    return ColorPickerBase;
}(BaseComponent));
export { ColorPickerBase };
//# sourceMappingURL=ColorPicker.base.js.map