define(["require", "exports", "tslib", "react", "../../Label", "./ChoiceGroupOption", "../../Utilities"], function (require, exports, tslib_1, React, Label_1, ChoiceGroupOption_1, Utilities_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    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 = Utilities_1.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, options = _a.options;
                        // Only manage state in uncontrolled scenarios.
                        if (selectedKey === undefined) {
                            _this.setState({
                                keyChecked: key
                            });
                        }
                        var originalOption = options.find(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'
            });
            _this.state = {
                keyChecked: props.defaultSelectedKey === undefined ? _this._getKeyChecked(props) : props.defaultSelectedKey,
                keyFocused: undefined
            };
            _this._id = Utilities_1.getId('ChoiceGroup');
            _this._labelId = Utilities_1.getId('ChoiceGroupLabel');
            return _this;
        }
        ChoiceGroupBase.prototype.componentWillReceiveProps = function (newProps) {
            var newKeyChecked = this._getKeyChecked(newProps);
            var oldKeyCheched = this._getKeyChecked(this.props);
            if (newKeyChecked !== oldKeyCheched) {
                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;
            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 = label ? this._id + '-label' : this.props['aria-labelledby'];
            return (
            // Need to assign role application on containing div because JAWS doesn't call OnKeyDown without this role
            React.createElement("div", { role: "application", 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(ChoiceGroupOption_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 () {
            if (this._inputElement.current) {
                this._inputElement.current.focus();
            }
        };
        ChoiceGroupBase.prototype._getKeyChecked = function (props) {
            if (props.selectedKey !== undefined) {
                return props.selectedKey;
            }
            var optionsChecked = props.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