import * as tslib_1 from "tslib";
import * as React from 'react';
import { Label } from '../../Label';
import { BaseComponent, classNamesFunction, find, getId } from '../../Utilities';
import { ChoiceGroupOption } from './ChoiceGroupOption/index';
var getClassNames = 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 = 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 = getId('ChoiceGroup');
        _this._labelId = 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 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'];
        // In cases where no option is checked, set focusable to first enabled option so that ChoiceGroup remains focusable.
        // If no options are enabled, ChoiceGroup is not focusable. If any option is checked, do not set keyDefaultFocusable.
        var firstEnabledOption = disabled || options === undefined ? undefined : find(options, function (option) { return !option.disabled; });
        var keyDefaultFocusable = keyChecked === undefined && firstEnabledOption ? firstEnabledOption.key : undefined;
        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, { 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, 'data-is-focusable': option.key === keyChecked || option.key === keyDefaultFocusable ? true : false, disabled: option.disabled || disabled, id: _this._id + "-" + option.key, labelId: _this._labelId + "-" + option.key, name: name || _this._id, required: required });
                    return (React.createElement(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;
}(BaseComponent));
export { ChoiceGroupBase };
//# sourceMappingURL=ChoiceGroup.base.js.map