import { __extends, __assign, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { ChoiceGroupOption } from './ChoiceGroupOption/index.js';
import BaseComponent from '../BaseComponent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { Label } from '../Label/Label.js';

var getClassNames = classNamesFunction();
var ChoiceGroupBase = function(_super) {
  __extends(ChoiceGroupBase2, _super);
  function ChoiceGroupBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.selectedOption = {};
    return _this;
  }
  Object.defineProperty(ChoiceGroupBase2.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
  });
  ChoiceGroupBase2.prototype.onClick = function(ev, option) {
    ev.preventDefault();
    if (option.disabled)
      return;
    this.selectedOption = option;
  };
  ChoiceGroupBase2.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)
  ], ChoiceGroupBase2.prototype, "label", void 0);
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], ChoiceGroupBase2.prototype, "options", void 0);
  __decorate([
    Prop({ type: Array, default: function() {
      return [];
    } }),
    __metadata("design:type", Array)
  ], ChoiceGroupBase2.prototype, "value", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ChoiceGroupBase2.prototype, "disabled", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], ChoiceGroupBase2.prototype, "required", void 0);
  ChoiceGroupBase2 = __decorate([
    Component({
      components: { ChoiceGroupOption: ChoiceGroupOption, Label: Label }
    })
  ], ChoiceGroupBase2);
  return ChoiceGroupBase2;
}(BaseComponent);

export { ChoiceGroupBase };
