import * as tslib_1 from "tslib";
import * as React from 'react';
import { Image } from '../../../Image';
import { Icon } from '../../../Icon';
import { classNamesFunction, getNativeProps, inputProperties, css, initializeComponentRef } from '../../../Utilities';
var getClassNames = classNamesFunction();
/**
 * {@docCategory ChoiceGroup}
 */
var ChoiceGroupOptionBase = /** @class */ (function (_super) {
    tslib_1.__extends(ChoiceGroupOptionBase, _super);
    function ChoiceGroupOptionBase(props) {
        var _this = _super.call(this, props) || this;
        _this._onChange = function (evt) {
            var onChange = _this.props.onChange;
            if (onChange) {
                onChange(evt, _this.props);
            }
        };
        _this._onBlur = function (evt) {
            var onBlur = _this.props.onBlur;
            if (onBlur) {
                onBlur(evt, _this.props);
            }
        };
        _this._onFocus = function (evt) {
            var onFocus = _this.props.onFocus;
            if (onFocus) {
                onFocus(evt, _this.props);
            }
        };
        _this._onRenderField = function (props) {
            var _a = props.onRenderLabel, onRenderLabel = _a === void 0 ? _this._onRenderLabel : _a, id = props.id, imageSrc = props.imageSrc, _b = props.imageAlt, imageAlt = _b === void 0 ? '' : _b, selectedImageSrc = props.selectedImageSrc, iconProps = props.iconProps;
            var imageSize = props.imageSize ? props.imageSize : { width: 32, height: 32 };
            var label = onRenderLabel(props, _this._onRenderLabel);
            return (React.createElement("label", { htmlFor: id, className: _this._classNames.field },
                imageSrc && (React.createElement("div", { className: _this._classNames.innerField },
                    React.createElement("div", { className: _this._classNames.imageWrapper },
                        React.createElement(Image, { src: imageSrc, alt: imageAlt, width: imageSize.width, height: imageSize.height })),
                    React.createElement("div", { className: _this._classNames.selectedImageWrapper },
                        React.createElement(Image, { src: selectedImageSrc, alt: imageAlt, width: imageSize.width, height: imageSize.height })))),
                iconProps && (React.createElement("div", { className: _this._classNames.innerField },
                    React.createElement("div", { className: _this._classNames.iconWrapper },
                        React.createElement(Icon, tslib_1.__assign({}, iconProps))))),
                imageSrc || iconProps ? React.createElement("div", { className: _this._classNames.labelWrapper }, label) : label));
        };
        _this._onRenderLabel = function (props) {
            return (React.createElement("span", { id: props.labelId, className: "ms-ChoiceFieldLabel" }, props.text));
        };
        initializeComponentRef(_this);
        return _this;
    }
    ChoiceGroupOptionBase.prototype.render = function () {
        var _a = this.props, ariaLabel = _a.ariaLabel, focused = _a.focused, required = _a.required, theme = _a.theme, iconProps = _a.iconProps, imageSrc = _a.imageSrc, _b = _a.imageSize, imageSize = _b === void 0 ? { width: 32, height: 32 } : _b, disabled = _a.disabled, checked = _a.checked, id = _a.id, styles = _a.styles, name = _a.name, _c = _a.onRenderField, onRenderField = _c === void 0 ? this._onRenderField : _c, rest = tslib_1.__rest(_a, ["ariaLabel", "focused", "required", "theme", "iconProps", "imageSrc", "imageSize", "disabled", "checked", "id", "styles", "name", "onRenderField"]);
        this._classNames = getClassNames(styles, {
            theme: theme,
            hasIcon: !!iconProps,
            hasImage: !!imageSrc,
            checked: checked,
            disabled: disabled,
            imageIsLarge: !!imageSrc && (imageSize.width > 71 || imageSize.height > 71),
            imageSize: imageSize,
            focused: focused
        });
        var _d = getNativeProps(rest, inputProperties), className = _d.className, nativeProps = tslib_1.__rest(_d, ["className"]);
        return (React.createElement("div", { className: this._classNames.root },
            React.createElement("div", { className: this._classNames.choiceFieldWrapper },
                React.createElement("input", tslib_1.__assign({ "aria-label": ariaLabel, id: id, className: css(this._classNames.input, className), type: "radio", name: name, disabled: disabled, checked: checked, required: required }, nativeProps, { onChange: this._onChange, onFocus: this._onFocus, onBlur: this._onBlur })),
                onRenderField(this.props, this._onRenderField))));
    };
    return ChoiceGroupOptionBase;
}(React.Component));
export { ChoiceGroupOptionBase };
//# sourceMappingURL=ChoiceGroupOption.base.js.map