import * as tslib_1 from "tslib";
import * as React from 'react';
import { Image } from '../../Image';
import { Label } from '../../Label';
import { Icon } from '../../Icon';
import { assign, BaseComponent, css, getId, getNativeProps, inputProperties, createRef } from '../../Utilities';
import * as stylesImport from './ChoiceGroup.scss';
var styles = stylesImport;
var ChoiceGroup = /** @class */ (function (_super) {
    tslib_1.__extends(ChoiceGroup, _super);
    function ChoiceGroup(props) {
        var _this = _super.call(this, props) || this;
        _this._inputElement = createRef();
        _this._warnDeprecations({ 'onChanged': 'onChange' });
        _this._warnMutuallyExclusive({
            selectedKey: 'defaultSelectedKey'
        });
        _this.state = {
            keyChecked: (props.defaultSelectedKey === undefined) ?
                _this._getKeyChecked(props) :
                props.defaultSelectedKey,
            keyFocused: undefined
        };
        _this._id = getId('ChoiceGroup');
        _this._labelId = 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 doesn't call OnKeyDown without this role
        React.createElement("div", { role: 'application', className: className },
            React.createElement("div", { className: css('ms-ChoiceFieldGroup', styles.root), role: 'radiogroup', "aria-labelledby": (this.props.label ? this._id + '-label' : '') + " " + (this.props['aria-labelledby'] || '') },
                this.props.label && (React.createElement(Label, { className: className, required: required, id: this._id + '-label' }, label)),
                React.createElement("div", { className: css('ms-ChoiceFieldGroup-flexContainer', options.some(function (option) { return Boolean(option.iconProps || option.imageSrc); }) && styles.optionsContainIconOrImage) }, options.map(function (option) {
                    var _a = option.onRenderField, onRenderField = _a === void 0 ? _this._onRenderField : _a, _b = option.onRenderLabel, onRenderLabel = _b === void 0 ? _this._onRenderLabel : _b;
                    // Merge internal props into option
                    assign(option, {
                        checked: option.key === keyChecked,
                        disabled: option.disabled || _this.props.disabled,
                        id: _this._id + "-" + option.key,
                        labelId: _this._labelId + "-" + option.key,
                        onRenderLabel: onRenderLabel
                    });
                    return (React.createElement("div", { key: option.key, className: css('ms-ChoiceField', styles.choiceField, (_c = {},
                            _c['ms-ChoiceField--image ' + styles.choiceFieldIsImage] = !!option.imageSrc,
                            _c['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon] = !!option.iconProps,
                            _c['is-inFocus ' + styles.choiceFieldIsInFocus] = option.key === keyFocused,
                            _c)) },
                        React.createElement("div", { className: css('ms-ChoiceField-wrapper', styles.choiceFieldWrapper) },
                            React.createElement("input", tslib_1.__assign({ ref: _this._inputElement, id: option.id, className: css('ms-ChoiceField-input', styles.input, (_d = {},
                                    _d['ms-ChoiceField--image ' + styles.inputHasImage] = !!option.imageSrc,
                                    _d['ms-ChoiceField--icon ' + styles.inputHasIcon] = !!option.iconProps,
                                    _d)), 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.ariaLabel ? undefined : option.labelId, "aria-label": option.ariaLabel }, getNativeProps(option, inputProperties))),
                            onRenderField(option, _this._onRenderField))));
                    var _c, _d;
                })))));
    };
    ChoiceGroup.prototype.focus = function () {
        if (this._inputElement.current) {
            this._inputElement.current.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) {
        var onRenderLabel = option.onRenderLabel;
        var imageSize = option.imageSize ? option.imageSize : { width: 32, height: 32 };
        var imageIsLarge = imageSize.width > 71 || imageSize.height > 71;
        return (React.createElement("label", { htmlFor: option.id, className: 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['is-largeImage ' + styles.imageIsLarge] = !!option.imageSrc && imageIsLarge,
                _a)) },
            option.imageSrc && (React.createElement("div", { className: css('ms-ChoiceField-innerField', styles.innerField), style: { height: imageSize.height, width: imageSize.width } },
                React.createElement("div", { className: css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_b = {},
                        _b['is-hidden ' + styles.imageWrapperIsHidden] = option.checked,
                        _b)) },
                    React.createElement(Image, { src: option.imageSrc, alt: option.imageAlt ? option.imageAlt : '', width: imageSize.width, height: imageSize.height })),
                React.createElement("div", { className: css('ms-ChoiceField-imageWrapper', styles.imageWrapper, (_c = {},
                        _c['is-hidden ' + styles.imageWrapperIsHidden] = !option.checked,
                        _c)) },
                    React.createElement(Image, { src: option.selectedImageSrc, alt: option.imageAlt ? option.imageAlt : '', width: imageSize.width, height: imageSize.height })))),
            option.iconProps
                ? React.createElement("div", { className: css('ms-ChoiceField-innerField', styles.innerField) },
                    React.createElement("div", { className: css('ms-ChoiceField-iconWrapper', styles.iconWrapper) },
                        React.createElement(Icon, tslib_1.__assign({}, option.iconProps))))
                : null,
            option.imageSrc || option.iconProps
                ? (React.createElement("div", { className: css('ms-ChoiceField-labelWrapper', styles.labelWrapper), style: { maxWidth: imageSize.width * 2 } }, onRenderLabel(option))) : onRenderLabel(option)));
        var _a, _b, _c;
    };
    ChoiceGroup.prototype._onRenderLabel = function (option) {
        return (React.createElement("span", { id: option.labelId, className: 'ms-Label' }, option.text));
    };
    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;
        }
    };
    ChoiceGroup.defaultProps = {
        options: []
    };
    return ChoiceGroup;
}(BaseComponent));
export { ChoiceGroup };
//# sourceMappingURL=ChoiceGroup.js.map