text: "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 = /** @class */ (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 }, 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: Utilities_1.css('ms-ColorPicker-input', styles.input), value: color.hex, ref: function (ref) { return _this.hexText = ref; }, onBlur: this._onHexChanged, spellCheck: false })),
                              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; }, spellCheck: false })),
                              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; }, spellCheck: false })),
                              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; }, spellCheck: false })),
                              !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; }, spellCheck: false })))))))));
      };
      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) {
          if (!newColor) {
              return;
          }
          var onColorChanged = this.props.onColorChanged;
          if (newColor.str !== this.state.color.str) {
              this.setState({
                  color: newColor
              }, function () {
                  if (onColorChanged) {
                      onColorChanged(newColor.str);
                  }
              });
          }
      };
      ColorPicker.defaultProps = {
          hexLabel: 'Hex',
          redLabel: 'Red',
          greenLabel: 'Green',
          blueLabel: 'Blue',
          alphaLabel: 'Alpha'
      };
      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