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

var getClassNames = classNamesFunction();
var ChoiceGroupOptionBase = function(_super) {
  __extends(ChoiceGroupOptionBase2, _super);
  function ChoiceGroupOptionBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(ChoiceGroupOptionBase2.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
  });
  ChoiceGroupOptionBase2.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; _a.disabled;
    "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)
  ], ChoiceGroupOptionBase2.prototype, "id", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", String)
  ], ChoiceGroupOptionBase2.prototype, "text", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ChoiceGroupOptionBase2.prototype, "iconProps", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ChoiceGroupOptionBase2.prototype, "imageSrc", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ChoiceGroupOptionBase2.prototype, "selectedImageSrc", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], ChoiceGroupOptionBase2.prototype, "imageAlt", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ChoiceGroupOptionBase2.prototype, "checked", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ChoiceGroupOptionBase2.prototype, "disabled", void 0);
  __decorate([
    Prop({ default: function() {
      return { width: 32, height: 32 };
    } }),
    __metadata("design:type", Object)
  ], ChoiceGroupOptionBase2.prototype, "imageSize", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Boolean)
  ], ChoiceGroupOptionBase2.prototype, "focused", void 0);
  ChoiceGroupOptionBase2 = __decorate([
    Component
  ], ChoiceGroupOptionBase2);
  return ChoiceGroupOptionBase2;
}(BaseComponent);

export { ChoiceGroupOptionBase };
