"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Image_1 = require("../../Image");
var Label_1 = require("../../Label");
var Icon_1 = require("../../Icon");
var Utilities_1 = require("../../Utilities");
var stylesImport = require("./ChoiceGroup.scss");
var styles = stylesImport;
var ChoiceGroup = (function (_super) {
    tslib_1.__extends(ChoiceGroup, _super);
    function ChoiceGroup(props) {
        var _this = _super.call(this, props) || this;
        _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;
    }
    ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
        var newKeyChecked = this._getKeyChecked(newProps);
        var oldKeyCheched = this._getKeyChecked(this.props);
        if (newKeyChecked !== oldKeyCheched) {
            this.setState({
                keyChecked: newKeyChecked,
            });
        }
    };
    ChoiceGroup.prototype.render = function () {
        var _this = this;
        var _a = this.props, label = _a.label, options = _a.options, className = _a.className, required = _a.required;
        var _b = this.state, keyChecked = _b.keyChecked, keyFocused = _b.keyFocused;
        return (
        // Need to assign role application on containing div because JAWS doesnt call OnKeyDown without this role
        React.createElement("div", { role: 'application', className: className },
            React.createElement("div", { className: Utilities_1.css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": this.props.label ? this._id + '-label' : '' },
                this.props.label && (React.createElement(Label_1.Label, { className: className, required: required, id: this._id + '-label' }, label)),
                options.map(function (option) {
                    var _a = option.onRenderField, onRenderField = _a === void 0 ? _this._onRenderField : _a;
                    // Merge internal props into option
                    Utilities_1.assign(option, {
                        checked: option.key === keyChecked,
                        disabled: option.disabled || _this.props.disabled,
                        id: _this._id + "-" + option.key,
                        labelId: _this._labelId + "-" + option.key
                    });
                    return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', styles.choiceField, (_b = {},
                            _b['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
                            _b['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
                            _b['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
                            _b)) },
                        React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: option.id, className: Utilities_1.css('ms-ChoiceField-input', styles.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.disabled || _this.props.disabled, checked: option.key === keyChecked, required: required, onChange: _this._onChange.bind(_this, option), onFocus: _this._onFocus.bind(_this, option), onBlur: _this._onBlur.bind(_this, option), "aria-labelledby": option.id }),
                        onRenderField(option, _this._onRenderField)));
                    var _b;
                }))));
    };
    ChoiceGroup.prototype.focus = function () {
        if (this._inputElement) {
            this._inputElement.focus();
        }
    };
    ChoiceGroup.prototype._onFocus = function (option, ev) {
        this.setState({
            keyFocused: option.key,
            keyChecked: this.state.keyChecked
        });
    };
    ChoiceGroup.prototype._onBlur = function (option, ev) {
        this.setState({
            keyFocused: undefined,
            keyChecked: this.state.keyChecked
        });
    };
    ChoiceGroup.prototype._onRenderField = function (option) {
        return (React.createElement("label", { htmlFor: option.id, className: Utilities_1.css('ms-ChoiceField-field', styles.field, (_a = {},
                _a['ms-ChoiceField-field--image ' + styles.fieldIsImage] = !!option.imageSrc,
                _a['ms-ChoiceField--icon ' + styles.fieldIsIcon] = !!option.iconProps,
                _a['is-checked ' + styles.fieldIsChecked] = option.checked,
                _a['is-disabled ' + styles.fieldIsDisabled] = option.disabled,
                _a)) },
            option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
                React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
                        _b['is-hidden ' + styles.imageWrapperIsHidden] = option.checked,
                        _b)) },
                    React.createElement(Image_1.Image, { src: option.imageSrc, width: option.imageSize.width, height: option.imageSize.height })),
                React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
                        _c['is-hidden ' + styles.imageWrapperIsHidden] = !option.checked,
                        _c)) },
                    React.createElement(Image_1.Image, { src: option.selectedImageSrc, width: option.imageSize.width, height: option.imageSize.height })))),
            option.iconProps
                ? React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', styles.innerField) },
                    React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
                        React.createElement(Icon_1.Icon, tslib_1.__assign({}, option.iconProps))))
                : null,
            option.imageSrc || option.iconProps
                ? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', styles.labelWrapper) },
                    React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text))));
        var _a, _b, _c;
    };
    ChoiceGroup.prototype._onChange = function (option, evt) {
        var _a = this.props, onChanged = _a.onChanged, onChange = _a.onChange, selectedKey = _a.selectedKey;
        // Only manage state in uncontrolled scenarios.
        if (selectedKey === undefined) {
            this.setState({
                keyChecked: option.key
            });
        }
        // TODO: onChanged deprecated, remove else if after 07/17/2017 when onChanged has been removed.
        if (onChange) {
            onChange(evt, option);
        }
        else if (onChanged) {
            onChanged(option);
        }
    };
    /**
     * If all the isChecked property of options are falsy values, return undefined;
     * Else return the key of the first option with the truthy isChecked property.
     */
    ChoiceGroup.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;
        }
    };
    return ChoiceGroup;
}(Utilities_1.BaseComponent));
ChoiceGroup.defaultProps = {
    options: []
};
exports.ChoiceGroup = ChoiceGroup;

//# sourceMappingURL=ChoiceGroup.js.map
