"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var TextField_1 = require("../../TextField");
var ColorRectangle_1 = require("./ColorRectangle/ColorRectangle");
var ColorSlider_1 = require("./ColorSlider/ColorSlider");
var colors_1 = require("../../utilities/color/colors");
var getClassNames = Utilities_1.classNamesFunction();
var rgbaComponents = ['r', 'g', 'b', 'a'];
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(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 (event, newValue) {
            if (newValue && newValue !== _this.state.color.hex) {
                _this._updateColor(colors_1.getColorFromString('#' + newValue));
            }
        };
        _this.state = {
            color: colors_1.getColorFromString(props.color)
        };
        _this._rgbaChangeHandlers = {};
        for (var _i = 0, rgbaComponents_1 = rgbaComponents; _i < rgbaComponents_1.length; _i++) {
            var component = rgbaComponents_1[_i];
            _this._rgbaChangeHandlers[component] = _this._onRGBAChanged.bind(_this, component);
        }
        _this._rgbaLabels = {
            r: props.redLabel,
            g: props.greenLabel,
            b: props.blueLabel,
            a: props.alphaLabel
        };
        return _this;
    }
    Object.defineProperty(ColorPickerBase.prototype, "color", {
        get: function () {
            return this.state.color;
        },
        enumerable: true,
        configurable: true
    });
    ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.color) {
            this._updateColor(colors_1.getColorFromString(newProps.color));
        }
    };
    ColorPickerBase.prototype.render = function () {
        var _this = this;
        var props = this.props;
        var theme = props.theme, className = props.className, styles = props.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 }),
                !props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: "is-alpha", isAlpha: true, overlayStyle: { background: "linear-gradient(to right, transparent 0, #" + color.hex + " 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 }, props.hexLabel),
                            React.createElement("td", null, props.redLabel),
                            React.createElement("td", null, props.greenLabel),
                            React.createElement("td", null, props.blueLabel),
                            !props.alphaSliderHidden && React.createElement("td", null, 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 || '', onChange: this._onHexChanged, spellCheck: false, ariaLabel: props.hexLabel })),
                            rgbaComponents.map(function (comp) {
                                var isAlpha = comp === 'a';
                                var value = String(color[comp] || 0);
                                if (isAlpha) {
                                    if (props.alphaSliderHidden) {
                                        return null;
                                    }
                                    value = typeof color.a === 'number' ? String(color.a.toPrecision(3)) : '';
                                }
                                return (React.createElement("td", { key: comp, style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: classNames.input, onChange: _this._rgbaChangeHandlers[comp], value: value, spellCheck: false, ariaLabel: _this._rgbaLabels[comp] })));
                            })))))));
    };
    ColorPickerBase.prototype._onRGBAChanged = function (component, event, newValue) {
        var color = this.state.color;
        if (String(color[component]) === newValue) {
            return;
        }
        this._updateColor(colors_1.getColorFromRGBA((_a = {
                r: color.r,
                g: color.g,
                b: color.b,
                a: color.a || 100
            },
            _a[component] = Number(newValue),
            _a)));
        var _a;
    };
    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