define(["require", "exports", "tslib", "react", "../../Utilities", "../../TextField", "./ColorRectangle/ColorRectangle", "./ColorSlider/ColorSlider", "../../utilities/color/colors"], function (require, exports, tslib_1, React, Utilities_1, TextField_1, ColorRectangle_1, ColorSlider_1, colors_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var getClassNames = Utilities_1.classNamesFunction();
    var ColorPickerBase = /** @class */ (function (_super) {
        tslib_1.__extends(ColorPickerBase, _super);
        function ColorPickerBase(props) {
            var _this = _super.call(this, props) || this;
            _this._hexText = Utilities_1.createRef();
            _this._rText = Utilities_1.createRef();
            _this._gText = Utilities_1.createRef();
            _this._bText = Utilities_1.createRef();
            _this._aText = Utilities_1.createRef();
            _this._onSVChanged = function (s, v) {
                _this._updateColor(colors_1.updateSV(_this.state.color, s, v));
            };
            _this._onHChanged = function (ev, h) {
                _this._updateColor(colors_1.updateH(_this.state.color, h));
            };
            _this._onAChanged = function (ev, a) {
                _this._updateColor(colors_1.updateA(_this.state.color, a));
            };
            _this._onHexChanged = function () {
                if (_this._hexText.current) {
                    _this._updateColor(colors_1.getColorFromString('#' + _this._hexText.current.value));
                }
            };
            _this._onRGBAChanged = function () {
                if (!_this._rText.current || !_this._gText.current || !_this._bText.current || !_this._aText.current) {
                    return;
                }
                _this._updateColor(colors_1.getColorFromRGBA({
                    r: Number(_this._rText.current.value),
                    g: Number(_this._gText.current.value),
                    b: Number(_this._bText.current.value),
                    a: Number(_this._aText.current.value || 100)
                }));
            };
            _this.state = {
                color: colors_1.getColorFromString(props.color)
            };
            return _this;
        }
        ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
            if (newProps.color) {
                this._updateColor(colors_1.getColorFromString(newProps.color));
            }
        };
        ColorPickerBase.prototype.render = function () {
            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_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
                    React.createElement(ColorSlider_1.ColorSlider, { className: "is-hue", minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChange: this._onHChanged }),
                    !this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: "is-alpha", isAlpha: true, overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, value: color.a, onChange: 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_1.TextField, { className: classNames.input, value: color.hex, componentRef: this._hexText, onBlur: this._onHexChanged, spellCheck: false, ariaLabel: this.props.hexLabel })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.r), componentRef: this._rText, spellCheck: false, ariaLabel: this.props.redLabel })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.g), componentRef: this._gText, spellCheck: false, ariaLabel: this.props.greenLabel })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.b), componentRef: this._bText, spellCheck: false, ariaLabel: this.props.blueLabel })),
                                !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: classNames.input, onBlur: this._onRGBAChanged, value: String(color.a ? color.a.toPrecision(3) : color.a), componentRef: this._aText, spellCheck: false, ariaLabel: this.props.alphaLabel })))))))));
        };
        ColorPickerBase.prototype._updateColor = function (newColor) {
            if (!newColor) {
                return;
            }
            var onColorChanged = this.props.onColorChanged;
            var color = this.state.color;
            var hasColorStringChanged = newColor.str !== color.str;
            if (newColor.h !== color.h || hasColorStringChanged) {
                this.setState({
                    color: newColor
                }, function () {
                    if (hasColorStringChanged && onColorChanged) {
                        onColorChanged(newColor.str, newColor);
                    }
                });
            }
        };
        ColorPickerBase.defaultProps = {
            hexLabel: 'Hex',
            redLabel: 'Red',
            greenLabel: 'Green',
            blueLabel: 'Blue',
            alphaLabel: 'Alpha'
        };
        return ColorPickerBase;
    }(Utilities_1.BaseComponent));
    exports.ColorPickerBase = ColorPickerBase;
});
//# sourceMappingURL=ColorPicker.base.js.map