import { __assign, __decorate, __extends, __metadata } from "tslib";
import { Component, Prop } from 'vue-property-decorator';
import { ChoiceGroupOption } from './ChoiceGroupOption';
import BaseComponent from '../BaseComponent';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Label } from '../Label';
var getClassNames = classNamesFunction();
var ChoiceGroupBase = /** @class */ (function (_super) {
    __extends(ChoiceGroupBase, _super);
    function ChoiceGroupBase() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.selectedOption = {};
        return _this;
    }
    Object.defineProperty(ChoiceGroupBase.prototype, "classNames", {
        get: function () {
            var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className;
            return getClassNames(styles, {
                theme: theme,
                className: className,
                optionsContainIconOrImage: false,
            });
        },
        enumerable: false,
        configurable: true
    });
    ChoiceGroupBase.prototype.onClick = function (ev, option) {
        ev.preventDefault();
        if (option.disabled)
            return;
        this.selectedOption = option;
    };
    ChoiceGroupBase.prototype.render = function (h) {
        var _this = this;
        var _a = this, classNames = _a.classNames, label = _a.label, required = _a.required, disabled = _a.disabled, selectedOption = _a.selectedOption, options = _a.options;
        var $label = label && h(Label, {
            class: classNames.label,
            attrs: {
                required: required,
                disabled: disabled,
            },
        }, label);
        var $flexContainer = h('div', {
            class: classNames.flexContainer,
        }, options.map(function (option) { return h(ChoiceGroupOption, {
            key: option.key,
            attrs: {
                id: option.key,
            },
            props: __assign(__assign({}, option), { checked: selectedOption.key === option.key }),
            nativeOn: {
                click: function (ev) { return _this.onClick(ev, option); },
            },
        }, option.text); }));
        return h('div', { class: classNames.root }, [
            $label,
            $flexContainer,
        ]);
    };
    __decorate([
        Prop({ type: String, default: null }),
        __metadata("design:type", String)
    ], ChoiceGroupBase.prototype, "label", void 0);
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], ChoiceGroupBase.prototype, "options", void 0);
    __decorate([
        Prop({ type: Array, default: function () { return []; } }),
        __metadata("design:type", Array)
    ], ChoiceGroupBase.prototype, "value", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ChoiceGroupBase.prototype, "disabled", void 0);
    __decorate([
        Prop({ type: Boolean, default: false }),
        __metadata("design:type", Boolean)
    ], ChoiceGroupBase.prototype, "required", void 0);
    ChoiceGroupBase = __decorate([
        Component({
            components: { ChoiceGroupOption: ChoiceGroupOption, Label: Label },
        })
    ], ChoiceGroupBase);
    return ChoiceGroupBase;
}(BaseComponent));
export { ChoiceGroupBase };
//# sourceMappingURL=ChoiceGroup.base.js.map