"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 consts_1 = require("../../utilities/color/consts");
var getColorFromString_1 = require("../../utilities/color/getColorFromString");
var getColorFromRGBA_1 = require("../../utilities/color/getColorFromRGBA");
var updateA_1 = require("../../utilities/color/updateA");
var updateH_1 = require("../../utilities/color/updateH");
var getClassNames = Utilities_1.classNamesFunction();
var colorComponents = ['hex', 'r', 'g', 'b', 'a'];
/**
 * {@docCategory ColorPicker}
 */
var ColorPickerBase = /** @class */ (function (_super) {
    tslib_1.__extends(ColorPickerBase, _super);
    function ColorPickerBase(props) {
        var _this = _super.call(this, props) || this;
        _this._onSVChanged = function (ev, color) {
            _this._updateColor(ev, color);
        };
        _this._onHChanged = function (ev, h) {
            _this._updateColor(ev, updateH_1.updateH(_this.state.color, h));
        };
        _this._onAChanged = function (ev, a) {
            _this._updateColor(ev, updateA_1.updateA(_this.state.color, a));
        };
        _this._warnDeprecations({
            onColorChanged: 'onChange'
        });
        _this.state = {
            color: _getColorFromProps(props) || getColorFromString_1.getColorFromString('#ffffff')
        };
        _this._textChangeHandlers = {};
        for (var _i = 0, colorComponents_1 = colorComponents; _i < colorComponents_1.length; _i++) {
            var component = colorComponents_1[_i];
            _this._textChangeHandlers[component] = _this._onTextChange.bind(_this, component);
        }
        _this._textLabels = {
            r: props.redLabel,
            g: props.greenLabel,
            b: props.blueLabel,
            a: props.alphaLabel,
            hex: props.hexLabel
        };
        return _this;
    }
    Object.defineProperty(ColorPickerBase.prototype, "color", {
        get: function () {
            return this.state.color;
        },
        enumerable: true,
        configurable: true
    });
    ColorPickerBase.prototype.componentWillReceiveProps = function (newProps) {
        var color = _getColorFromProps(newProps);
        if (color) {
            this._updateColor(undefined, 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, onChange: this._onSVChanged }),
                React.createElement(ColorSlider_1.ColorSlider, { className: "is-hue", minValue: 0, maxValue: consts_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, colorComponents.map(function (comp) {
                            if (comp === 'a' && props.alphaSliderHidden) {
                                return null;
                            }
                            return (React.createElement("td", { key: comp, style: comp === 'hex' ? undefined : { width: '18%' } },
                                React.createElement(TextField_1.TextField, { className: classNames.input, onChange: _this._textChangeHandlers[comp], value: _this._getDisplayValue(comp), spellCheck: false, ariaLabel: _this._textLabels[comp] })));
                        })))))));
    };
    ColorPickerBase.prototype._getDisplayValue = function (component) {
        var color = this.state.color;
        if (typeof color[component] === 'number') {
            return String(component === 'a' ? color.a.toPrecision(3) : color[component]);
        }
        return color[component] || '';
    };
    ColorPickerBase.prototype._onTextChange = function (component, event, newValue) {
        var color = this.state.color;
        var isHex = component === 'hex';
        if (String(color[component]) === newValue) {
            return;
        }
        var newColor;
        if (isHex) {
            newColor = getColorFromString_1.getColorFromString('#' + newValue);
        }
        else {
            newColor = getColorFromRGBA_1.getColorFromRGBA((_a = {
                    r: color.r,
                    g: color.g,
                    b: color.b,
                    a: color.a || 100
                },
                _a[component] = Number(newValue),
                _a));
        }
        this._updateColor(event, newColor);
        var _a;
    };
    /**
     * Update the displayed color and call change handlers if appropriate.
     * @param ev - Event if call was triggered by an event (undefined if triggered by props change)
     * @param newColor - Updated color
     */
    ColorPickerBase.prototype._updateColor = function (ev, newColor) {
        if (!newColor) {
            return;
        }
        var props = this.props;
        var color = this.state.color;
        var isDifferentColor = newColor.h !== color.h || newColor.str !== color.str;
        if (isDifferentColor) {
            this.setState({ color: newColor }, function () {
                if (ev && props.onChange) {
                    props.onChange(ev, newColor);
                }
                // To preserve the existing behavior, this one is called even when the change comes from a
                // props update (which is not very useful)
                if (props.onColorChanged) {
                    props.onColorChanged(newColor.str, newColor);
                }
            });
        }
    };
    ColorPickerBase.defaultProps = {
        hexLabel: 'Hex',
        redLabel: 'Red',
        greenLabel: 'Green',
        blueLabel: 'Blue',
        alphaLabel: 'Alpha'
    };
    return ColorPickerBase;
}(Utilities_1.BaseComponent));
exports.ColorPickerBase = ColorPickerBase;
function _getColorFromProps(props) {
    var color = props.color;
    return typeof color === 'string' ? getColorFromString_1.getColorFromString(color) : color;
}
//# sourceMappingURL=ColorPicker.base.js.map