import { __extends, __assign, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { DialogContent } from './DialogContent.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { DialogType } from './DialogContent.types.js';
import { Modal } from '../Modal/Modal.js';
import { Layer } from '../Layer/Layer.js';

var getClassNames = classNamesFunction();
var DefaultModalProps = {
  isDarkOverlay: false,
  isBlocking: false,
  className: "",
  containerClassName: "",
  topOffsetFixed: false
};
var DefaultDialogContentProps = {
  type: DialogType.normal,
  className: "",
  topButtonsProps: []
};
var DialogBase = function(_super) {
  __extends(DialogBase2, _super);
  function DialogBase2() {
    return _super !== null && _super.apply(this, arguments) || this;
  }
  Object.defineProperty(DialogBase2.prototype, "mergedLayerProps", {
    get: function() {
      var _a = this, modalProps = _a.modalProps, onLayerDidMount = _a.onLayerDidMount;
      var mergedLayerProps = __assign({}, modalProps ? modalProps.layerProps : { onLayerDidMount: onLayerDidMount });
      if (onLayerDidMount && !mergedLayerProps.onLayerDidMount) {
        mergedLayerProps.onLayerDidMount = onLayerDidMount;
      }
      return mergedLayerProps;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DialogBase2.prototype, "dragOptions", {
    get: function() {
      var modalProps = this.modalProps;
      var dialogDraggableClassName;
      var dragOptions;
      if (modalProps && modalProps.dragOptions && !modalProps.dragOptions.dragHandleSelector) {
        dialogDraggableClassName = "ms-Dialog-draggable-header";
        dragOptions = __assign(__assign({}, modalProps.dragOptions), { dragHandleSelector: ".".concat(dialogDraggableClassName) });
      } else {
        dragOptions = modalProps && modalProps.dragOptions;
      }
      return dragOptions;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DialogBase2.prototype, "mergedModalProps", {
    get: function() {
      var _a = this, className = _a.className, modalProps = _a.modalProps, dragOptions = _a.dragOptions;
      return __assign(__assign(__assign({ className: className }, DefaultModalProps), modalProps), { layerProps: this.mergedLayerProps, dragOptions: dragOptions });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(DialogBase2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, mergedModalProps = _a.mergedModalProps, hidden = _a.hidden, minWidth = _a.minWidth, maxWidth = _a.maxWidth;
      return getClassNames(styles, {
        theme: theme,
        className: mergedModalProps.className,
        hidden: hidden,
        dialogDefaultMinWidth: minWidth,
        dialogDefaultMaxWidth: maxWidth
      });
    },
    enumerable: false,
    configurable: true
  });
  DialogBase2.prototype.render = function(h) {
    var _this = this;
    var _a;
    var _b = this, classNames = _b.classNames, mergedModalProps = _b.mergedModalProps, hidden = _b.hidden, responsiveMode = _b.responsiveMode;
    var onDismiss = function(ev) {
      return _this.$emit("dismiss", ev);
    };
    var dialogContentProps = __assign(__assign(__assign({}, DefaultDialogContentProps), this.dialogContentProps), {
      titleProps: __assign({
        id: this._getTitleTextId()
      }, (_a = this.dialogContentProps) === null || _a === void 0 ? void 0 : _a.titleProps)
    });
    var $dialogContent = h(DialogContent, {
      attrs: __assign({ subTextId: this._getSubTextId(), title: dialogContentProps.title, subText: dialogContentProps.subText, showCloseButton: mergedModalProps.isBlocking, topButtonsProps: dialogContentProps.topButtonsProps, type: dialogContentProps.type, class: dialogContentProps.className }, dialogContentProps),
      on: {
        dismiss: onDismiss || dialogContentProps.onDismiss
      }
    }, this.$slots.default);
    var $modal = h(Modal, {
      attrs: __assign(__assign({ responsiveMode: responsiveMode }, mergedModalProps), { isDarkOverlay: mergedModalProps.isDarkOverlay, isBlocking: mergedModalProps.isBlocking, isOpen: !hidden, class: classNames.root, containerClassName: classNames.main, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),
      on: {
        dismiss: onDismiss || dialogContentProps.onDismiss
      }
    }, [
      $dialogContent
    ]);
    return $modal;
  };
  DialogBase2.prototype._getSubTextId = function() {
    return "".concat(this.uid, "-subText");
  };
  DialogBase2.prototype._getTitleTextId = function() {
    return "".concat(this.uid, "-title");
  };
  __decorate([
    Prop({ type: Object, default: function() {
    } }),
    __metadata("design:type", Object)
  ], DialogBase2.prototype, "dialogContentProps", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], DialogBase2.prototype, "hidden", void 0);
  __decorate([
    Prop({ type: Object, default: null }),
    __metadata("design:type", Object)
  ], DialogBase2.prototype, "modalProps", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", Object)
  ], DialogBase2.prototype, "minWidth", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", Object)
  ], DialogBase2.prototype, "maxWidth", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Object)
  ], DialogBase2.prototype, "onLayerDidMount", void 0);
  __decorate([
    Prop({ type: Number, default: null }),
    __metadata("design:type", Number)
  ], DialogBase2.prototype, "responsiveMode", void 0);
  DialogBase2 = __decorate([
    Component({
      components: { Layer: Layer }
    })
  ], DialogBase2);
  return DialogBase2;
}(BaseComponent);

export { DialogBase };
