var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
define(["require", "exports", "react", "../../Utilities", "../../TextField", "./ColorRectangle", "./ColorSlider", "./colors", "./ColorPicker.scss"], function (require, exports, React, Utilities_1, TextField_1, ColorRectangle_1, ColorSlider_1, colors_1, ColorPicker_scss_1) {
    "use strict";
    var ColorPicker = (function (_super) {
        __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 color = this.state.color;
            return (React.createElement("div", { className: Utilities_1.css('ms-ColorPicker', ColorPicker_scss_1.default.root) },
                React.createElement("div", { className: Utilities_1.css('ms-ColorPicker-panel', ColorPicker_scss_1.default.panel) },
                    React.createElement(ColorRectangle_1.ColorRectangle, { color: color, onSVChanged: this._onSVChanged }),
                    React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-hue', ColorPicker_scss_1.default.colorSliderIsHue), minValue: 0, maxValue: colors_1.MAX_COLOR_HUE, initialValue: color.h, onChanged: this._onHChanged }),
                    !this.props.alphaSliderHidden && (React.createElement(ColorSlider_1.ColorSlider, { className: Utilities_1.css('is-alpha', ColorPicker_scss_1.default.colorSliderIsAlpha), overlayStyle: { background: "linear-gradient(to right, transparent 0, " + color.str + " 100%)" }, minValue: 0, maxValue: 100, initialValue: color.a, onChanged: this._onAChanged })),
                    React.createElement("table", { className: 'ms-ColorPicker-table', cellPadding: '0', cellSpacing: '0' },
                        React.createElement("thead", null,
                            React.createElement("tr", { className: 'ms-font-s' },
                                React.createElement("td", null, "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', ColorPicker_scss_1.default.input), value: color.hex })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', ColorPicker_scss_1.default.input), value: String(color.r) })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', ColorPicker_scss_1.default.input), value: String(color.g) })),
                                React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', ColorPicker_scss_1.default.input), value: String(color.b) })),
                                !this.props.alphaSliderHidden && (React.createElement("td", { style: { width: '18%' } },
                                    React.createElement(TextField_1.TextField, { className: Utilities_1.css('ms-ColorPicker-input', ColorPicker_scss_1.default.input), value: String(color.a) })))))))));
        };
        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._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);
                    }
                });
            }
        };
        return ColorPicker;
    }(React.Component));
    __decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onSVChanged", null);
    __decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onHChanged", null);
    __decorate([
        Utilities_1.autobind
    ], ColorPicker.prototype, "_onAChanged", null);
    exports.ColorPicker = ColorPicker;
});

//# sourceMappingURL=ColorPicker.js.map
