"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");
var ColorSlider_1 = require("./ColorSlider");
var colors_1 = require("../../utilities/color/colors");
var Styling_1 = require("../../Styling");
var stylesImport = require("./ColorPicker.scss");
var styles = stylesImport;
var ColorPicker = (function (_super) {
    tslib_1.__extends(ColorPicker, _super);
    function ColorPicker(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            color: colors_1.getColorFromString(props.color)
        };
        return _this;
    }
    ColorPicker.prototype.componentWillReceiveProps = function (newProps) {
        if (newProps.color) {
            this._updateColor(colors_1.getColorFromString(newProps.color));
        }
    };
    ColorPicker.prototype.render = function () {
        var _this = this;
        var color = this.state.color;
        return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', styles.root) },
            React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', styles.panel) },
                React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
                React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', styles.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, value: color.h, onChanged: this._onHChanged }),
                !this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', styles.colorSliderIsAlpha), 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: Utilities_1.css('ms-ColorPicker-table', styles.table), cellPadding: '0', cellSpacing: '0' },
                    React.createElement("thead", null,
                        React.createElement("tr", { className: Styling_1.FontClassNames.small },
                            React.createElement("td", { className: styles.tableHexCell }, "Hex"),
                            React.createElement("td", null, "Red"),
                            React.createElement("td", null, "Green"),
                            React.createElement("td", null, "Blue"),
                            !this.props.alphaSliderHidden && (React.createElement("td", null, "Alpha")))),
                    React.createElement("tbody", null,
                        React.createElement("tr", null,
                            React.createElement("td", null,
                                React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.r), ref: function (ref) { return _this.rText = ref; } })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.g), ref: function (ref) { return _this.gText = ref; } })),
                            React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.b), ref: function (ref) { return _this.bText = ref; } })),
                            !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
                                React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', styles.input), onBlur: this._onRGBAChanged, value: String(color.a), ref: function (ref) { return _this.aText = ref; } })))))))));
    };
    ColorPicker.prototype._onSVChanged = function (s, v) {
        this._updateColor(colors_1.updateSV(this.state.color, s, v));
    };
    ColorPicker.prototype._onHChanged = function (h) {
        this._updateColor(colors_1.updateH(this.state.color, h));
    };
    ColorPicker.prototype._onAChanged = function (a) {
        this._updateColor(colors_1.updateA(this.state.color, a));
    };
    ColorPicker.prototype._onHexChanged = function () {
        this._updateColor(colors_1.getColorFromString('#' + this.hexText.value));
    };
    ColorPicker.prototype._onRGBAChanged = function () {
        this._updateColor(colors_1.getColorFromRGBA({
            r: Number(this.rText.value),
            g: Number(this.gText.value),
            b: Number(this.bText.value),
            a: Number(this.aText.value)
        }));
    };
    ColorPicker.prototype._updateColor = function (newColor) {
        var onColorChanged = this.props.onColorChanged;
        if (newColor.str !== this.state.color.str) {
            this.setState({
                color: newColor
            }, function () {
                if (onColorChanged) {
                    onColorChanged(newColor.str);
                }
            });
        }
    };
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onSVChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onHChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onAChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onHexChanged", null);
    tslib_1.__decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onRGBAChanged", null);
    return ColorPicker;
}(Utilities_1.BaseComponent));
exports.ColorPicker = ColorPicker;
//# sourceMappingURL=ColorPicker.js.map