import { __assign, __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import BaseComponent from '../../BaseComponent';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Icon } from '../../Icon';
import { Image } from '../../Image';
var getClassNames = classNamesFunction();
var ChoiceGroupOptionBase = /** @class */ (function (_super) {
    __extends(ChoiceGroupOptionBase, _super);
    function ChoiceGroupOptionBase() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Object.defineProperty(ChoiceGroupOptionBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, iconProps = _a.iconProps, imageSrc = _a.imageSrc, checked = _a.checked, disabled = _a.disabled, imageSize = _a.imageSize, focused = _a.focused;
            return getClassNames(styles, {
                theme: theme,
                hasIcon: !!iconProps,
                hasImage: !!imageSrc,
                checked: checked,
                disabled: disabled,
                imageIsLarge: !!imageSrc && (imageSize.width > 71 || imageSize.height > 71),
                imageSize: imageSize,
                focused: focused,
            });
        },
        enumerable: false,
        configurable: true
    });
    ChoiceGroupOptionBase.prototype.render = function (h) {
        var _a = this, id = _a.id, classNames = _a.classNames, text = _a.text, imageSrc = _a.imageSrc, imageAlt = _a.imageAlt, imageSize = _a.imageSize, selectedImageSrc = _a.selectedImageSrc, iconProps = _a.iconProps, disabled = _a.disabled;
        var _id = "ChoiceGroup".concat(this.uid);
        var $input = h('input', {
            class: classNames.input,
            attrs: {
                id: "ChoiceGroup".concat(this.uid, "-").concat(id),
                name: "ChoiceGroup".concat(this.uid),
                type: 'radio',
            },
        });
        var $label = h('label', {
            class: classNames.field,
            attrs: {
                for: "ChoiceGroup".concat(this.uid, "-").concat(id),
            },
        }, [
            imageSrc && h('div', { class: classNames.innerField }, [
                h('div', { class: classNames.imageWrapper }, [
                    h(Image, {
                        props: __assign({ src: imageSrc, alt: imageAlt }, imageSize),
                    }),
                ]),
                h('div', { class: classNames.selectedImageWrapper }, [
                    h(Image, {
                        props: __assign({ src: selectedImageSrc, alt: imageAlt }, imageSize),
                    }),
                ]),
            ]),
            iconProps && h('div', { class: classNames.innerField }, [
                h('div', { class: classNames.iconWrapper }, [
                    h(Icon, { props: iconProps }),
                ]),
            ]),
            (imageSrc || iconProps)
                ? h('div', { class: classNames.labelWrapper }, [
                    h('span', { staticClass: 'ms-ChoiceFieldLabel' }, this.$slots.default || text),
                ])
                : h('span', { staticClass: 'ms-ChoiceFieldLabel' }, this.$slots.default || text),
        ]);
        return h('div', { class: classNames.root }, [
            h('div', { class: classNames.choiceFieldWrapper }, [
                $input,
                $label,
            ]),
        ]);
    };
    __decorate([
        Prop(),
        __metadata("design:type", String)
    ], ChoiceGroupOptionBase.prototype, "id", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", String)
    ], ChoiceGroupOptionBase.prototype, "text", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ChoiceGroupOptionBase.prototype, "iconProps", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ChoiceGroupOptionBase.prototype, "imageSrc", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ChoiceGroupOptionBase.prototype, "selectedImageSrc", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Object)
    ], ChoiceGroupOptionBase.prototype, "imageAlt", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ChoiceGroupOptionBase.prototype, "checked", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ChoiceGroupOptionBase.prototype, "disabled", void 0);
    __decorate([
        Prop({ default: function () { return ({ width: 32, height: 32 }); } }),
        __metadata("design:type", Object)
    ], ChoiceGroupOptionBase.prototype, "imageSize", void 0);
    __decorate([
        Prop(),
        __metadata("design:type", Boolean)
    ], ChoiceGroupOptionBase.prototype, "focused", void 0);
    ChoiceGroupOptionBase = __decorate([
        Component
    ], ChoiceGroupOptionBase);
    return ChoiceGroupOptionBase;
}(BaseComponent));
export { ChoiceGroupOptionBase };
//# sourceMappingURL=ChoiceGroupOption.base.js.map