"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
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 ChoiceGroup_scss_1 = require("./ChoiceGroup.scss");
var ChoiceGroup = (function (_super) {
    __extends(ChoiceGroup, _super);
    function ChoiceGroup(props) {
        var _this = _super.call(this, props, (_a = {}, _a['onChanged'] = 'onChange', _a)) || this;
        _this.state = {
            keyChecked: _this._getKeyChecked(props.options),
            keyFocused: undefined
        };
        _this._id = Utilities_1.getId('ChoiceGroup');
        _this._labelId = Utilities_1.getId('ChoiceGroupLabel');
        return _this;
        var _a;
    }
    ChoiceGroup.prototype.componentWillReceiveProps = function (newProps) {
        var newKeyChecked = this._getKeyChecked(newProps.options);
        var oldKeyCheched = this._getKeyChecked(this.props.options);
        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', ChoiceGroup_scss_1.default.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) {
                    return (React.createElement("div", { key: option.key, className: Utilities_1.css('ms-ChoiceField', ChoiceGroup_scss_1.default.choiceField, (_a = {},
                            _a['ms-ChoiceField--image ' + ChoiceGroup_scss_1.default.choiceFieldIsImage] = !!option.imageSrc || !!option.iconProps,
                            _a['is-inFocus ' + ChoiceGroup_scss_1.default.choiceFieldIsInFocus] = option.key === keyFocused,
                            _a)) },
                        React.createElement("input", { ref: function (c) { return _this._inputElement = c; }, id: _this._id + "-" + option.key, className: Utilities_1.css('ms-ChoiceField-input', ChoiceGroup_scss_1.default.input), type: 'radio', name: _this.props.name || _this._id, disabled: option.isDisabled || 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": _this._labelId + "-" + option.key }),
                        _this._renderField(option)));
                    var _a;
                }))));
    };
    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._renderField = function (option) {
        var keyChecked = this.state.keyChecked;
        var isDisabled = option.isDisabled || option.disabled || this.props.disabled;
        return (React.createElement("label", { htmlFor: this._id + '-' + option.key, className: Utilities_1.css((_a = {},
                _a['ms-ChoiceField-field ' + ChoiceGroup_scss_1.default.field] = !option.imageSrc && !option.iconProps,
                _a['ms-ChoiceField-field--image ' + ChoiceGroup_scss_1.default.fieldIsImage] = !!option.imageSrc || !!option.iconProps,
                _a['is-checked ' + ChoiceGroup_scss_1.default.fieldIsChecked] = option.key === keyChecked,
                _a['is-disabled ' + ChoiceGroup_scss_1.default.fieldIsDisabled] = isDisabled,
                _a)) },
            option.imageSrc && (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-innerField', ChoiceGroup_scss_1.default.innerField) },
                React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-imageWrapper', ChoiceGroup_scss_1.default.imageWrapper, (_b = {},
                        _b['is-hidden ' + ChoiceGroup_scss_1.default.imageWrapperIsHidden] = option.key === keyChecked,
                        _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', ChoiceGroup_scss_1.default.imageWrapper, (_c = {},
                        _c['is-hidden ' + ChoiceGroup_scss_1.default.imageWrapperIsHidden] = option.key !== keyChecked,
                        _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', ChoiceGroup_scss_1.default.innerField) },
                    React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-iconWrapper', ChoiceGroup_scss_1.default.iconWrapper) },
                        React.createElement(Icon_1.Icon, __assign({}, option.iconProps))))
                : null,
            option.imageSrc || option.iconProps
                ? (React.createElement("div", { className: Utilities_1.css('ms-ChoiceField-labelWrapper', ChoiceGroup_scss_1.default.labelWrapper) },
                    React.createElement(Icon_1.Icon, { className: Utilities_1.css('ms-ChoiceField-icon', ChoiceGroup_scss_1.default.icon), iconName: 'CheckMark' }),
                    React.createElement("span", { id: this._labelId + "-" + option.key, className: 'ms-Label' }, option.text))) : (React.createElement("span", { id: this._labelId + "-" + option.key, 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;
        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 (options) {
        var optionsChecked = options.filter(function (option) {
            return option.isChecked || 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
