text: "use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var tslib_1 = require("tslib");
  var React = require("react");
  var Label_1 = require("../../Label");
  var Utilities_1 = require("../../Utilities");
  var index_1 = require("./ChoiceGroupOption/index");
  var getClassNames = Utilities_1.classNamesFunction();
  var ChoiceGroupBase = /** @class */ (function (_super) {
      tslib_1.__extends(ChoiceGroupBase, _super);
      function ChoiceGroupBase(props) {
          var _this = _super.call(this, props) || this;
          _this._inputElement = React.createRef();
          _this.focusedVars = {};
          _this.changedVars = {};
          _this._onFocus = function (key) {
              return _this.focusedVars[key]
                  ? _this.focusedVars[key]
                  : (_this.focusedVars[key] = function (ev, option) {
                      _this.setState({
                          keyFocused: key,
                          keyChecked: _this.state.keyChecked
                      });
                  });
          };
          _this._onBlur = function (ev, option) {
              _this.setState({
                  keyFocused: undefined,
                  keyChecked: _this.state.keyChecked
              });
          };
          _this._onChange = function (key) {
              return _this.changedVars[key]
                  ? _this.changedVars[key]
                  : (_this.changedVars[key] = function (evt, option) {
                      var _a = _this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey, _b = _a.options, options = _b === void 0 ? [] : _b;
                      // Only manage state in uncontrolled scenarios.
                      if (selectedKey === undefined) {
                          _this.setState({
                              keyChecked: key
                          });
                      }
                      var originalOption = Utilities_1.find(options, function (value) { return value.key === key; });
                      // TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
                      if (onChange) {
                          onChange(evt, originalOption);
                      }
                      else if (onChanged) {
                          onChanged(originalOption);
                      }
                  });
          };
          _this._warnDeprecations({ onChanged: 'onChange' });
          _this._warnMutuallyExclusive({
              selectedKey: 'defaultSelectedKey'
          });
          var validDefaultSelectedKey = !!props.options && props.options.some(function (option) { return option.key === props.defaultSelectedKey; });
          _this.state = {
              keyChecked: props.defaultSelectedKey === undefined || !validDefaultSelectedKey ? _this._getKeyChecked(props) : props.defaultSelectedKey,
              keyFocused: undefined
          };
          _this._id = Utilities_1.getId('ChoiceGroup');
          _this._labelId = Utilities_1.getId('ChoiceGroupLabel');
          return _this;
      }
      Object.defineProperty(ChoiceGroupBase.prototype, "checkedOption", {
          /**
           * Gets the current checked option.
           */
          get: function () {
              var _a = this.props.options, options = _a === void 0 ? [] : _a;
              var key = this.state.keyChecked;
              return Utilities_1.find(options, function (value) { return value.key === key; });
          },
          enumerable: true,
          configurable: true
      });
      ChoiceGroupBase.prototype.componentWillReceiveProps = function (newProps) {
          var newKeyChecked = this._getKeyChecked(newProps);
          var oldKeyChecked = this._getKeyChecked(this.props);
          if (newKeyChecked !== oldKeyChecked) {
              this.setState({
                  keyChecked: newKeyChecked
              });
          }
      };
      ChoiceGroupBase.prototype.render = function () {
          var _this = this;
          var _a = this.props, className = _a.className, theme = _a.theme, styles = _a.styles, options = _a.options, label = _a.label, required = _a.required, disabled = _a.disabled, name = _a.name, role = _a.role;
          var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
          var classNames = getClassNames(styles, {
              theme: theme,
              className: className,
              optionsContainIconOrImage: options.some(function (option) { return Boolean(option.iconProps || option.imageSrc); })
          });
          var ariaLabelledBy = this.props.ariaLabelledBy
              ? this.props.ariaLabelledBy
              : label
                  ? this._id + '-label'
                  : this.props['aria-labelledby'];
          return (React.createElement("div", { role: role, className: classNames.applicationRole },
              React.createElement("div", tslib_1.__assign({ className: classNames.root, role: "radiogroup" }, ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }),
                  label && (React.createElement(Label_1.Label, { className: classNames.label, required: required, id: this._id + '-label' }, label)),
                  React.createElement("div", { className: classNames.flexContainer }, options.map(function (option) {
                      var innerOptionProps = tslib_1.__assign({}, option, { focused: option.key === keyFocused, checked: option.key === keyChecked, disabled: option.disabled || disabled, id: _this._id + "-" + option.key, labelId: _this._labelId + "-" + option.key, name: name || _this._id, required: required });
                      return (React.createElement(index_1.ChoiceGroupOption, tslib_1.__assign({ key: option.key, onBlur: _this._onBlur, onFocus: _this._onFocus(option.key), onChange: _this._onChange(option.key) }, innerOptionProps)));
                  })))));
      };
      ChoiceGroupBase.prototype.focus = function () {
          var options = this.props.options;
          if (options) {
              for (var _i = 0, options_1 = options; _i < options_1.length; _i++) {
                  var option = options_1[_i];
                  var elementToFocus = document.getElementById(this._id + "-" + option.key);
                  if (elementToFocus && elementToFocus.getAttribute('data-is-focusable') === 'true') {
                      elementToFocus.focus(); // focus on checked or default focusable key
                      return;
                  }
              }
          }
          if (this._inputElement.current) {
              this._inputElement.current.focus();
          }
      };
      ChoiceGroupBase.prototype._getKeyChecked = function (props) {
          if (props.selectedKey !== undefined) {
              return props.selectedKey;
          }
          var _a = props.options, options = _a === void 0 ? [] : _a;
          var optionsChecked = options.filter(function (option) {
              return option.checked;
          });
          if (optionsChecked.length === 0) {
              return undefined;
          }
          else {
              return optionsChecked[0].key;
          }
      };
      ChoiceGroupBase.defaultProps = {
          options: []
      };
      return ChoiceGroupBase;
  }(Utilities_1.BaseComponent));
  exports.ChoiceGroupBase = ChoiceGroupBase;
  //# sourceMappingURL=ChoiceGroup.base.js.map