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 { DialogType } from './DialogContent.types.js';
import { IconButton } from '../Button/IconButton/IconButton.js';

var getClassNames = classNamesFunction();
var DialogContentBase = function(_super) {
  __extends(DialogContentBase2, _super);
  function DialogContentBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(DialogContentBase2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, className = _a.className, type = _a.type, draggableHeaderClassName = _a.draggableHeaderClassName;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        isLargeHeader: type === DialogType.largeHeader,
        isClose: type === DialogType.close,
        draggableHeaderClassName: draggableHeaderClassName
      });
    },
    enumerable: false,
    configurable: true
  });
  DialogContentBase2.prototype.render = function(h) {
    var _this = this;
    var _a = this, classNames = _a.classNames, css = _a.css, title = _a.title, type = _a.type, showCloseButton = _a.showCloseButton, closeButtonAriaLabel = _a.closeButtonAriaLabel, subText = _a.subText, subTextId = _a.subTextId;
    var titleProps = this.titleProps || {};
    var $subTextContent = subText && h("p", {
      class: classNames.subText,
      attrs: { id: subTextId }
    }, subText);
    var $inner = h("div", { class: classNames.inner }, [
      h("div", { class: classNames.innerContent }, [
        $subTextContent,
        this.$slots.default
      ]),
      this.$slots.footer
    ]);
    var $title = h("div", {
      class: css(classNames.title, titleProps.className),
      attrs: __assign({ role: "heading", "aria-level": 1 }, titleProps)
    }, title);
    var $topButton = h("div", { class: classNames.topButton }, [
      (type === DialogType.close || showCloseButton && type !== DialogType.largeHeader) && h(IconButton, {
        class: classNames.button,
        attrs: {
          iconProps: { iconName: "Cancel" },
          ariaLabel: closeButtonAriaLabel,
          title: closeButtonAriaLabel
        },
        on: {
          click: function(ev) {
            return _this.$emit("dismiss", ev);
          }
        }
      })
    ]);
    return h("div", { class: classNames.content }, [
      h("div", { class: classNames.header }, [
        $title,
        $topButton
      ]),
      $inner
    ]);
  };
  __decorate([
    Prop({ type: Number, default: DialogType.normal }),
    __metadata("design:type", Number)
  ], DialogContentBase2.prototype, "type", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], DialogContentBase2.prototype, "draggableHeaderClassName", void 0);
  __decorate([
    Prop({ type: Object, default: function() {
    } }),
    __metadata("design:type", Object)
  ], DialogContentBase2.prototype, "titleProps", void 0);
  __decorate([
    Prop({ type: [String, Object], default: null }),
    __metadata("design:type", Object)
  ], DialogContentBase2.prototype, "title", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], DialogContentBase2.prototype, "showCloseButton", void 0);
  __decorate([
    Prop({ type: String, default: "Close" }),
    __metadata("design:type", String)
  ], DialogContentBase2.prototype, "closeButtonAriaLabel", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], DialogContentBase2.prototype, "subText", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], DialogContentBase2.prototype, "subTextId", void 0);
  DialogContentBase2 = __decorate([
    Component
  ], DialogContentBase2);
  return DialogContentBase2;
}(BaseComponent);

export { DialogContentBase };
