import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Watch, Component } from 'vue-property-decorator';
import BaseComponent from '../BaseComponent.js';
import { MessageBarType } from './MessageBar.types.js';
import { classNamesFunction } from '@uifabric-vue/utilities';
import { IconButton } from '../Button/IconButton/IconButton.js';
import { Icon } from '../Icon/Icon.js';

var _a;
var getClassNames = classNamesFunction();
var ICON_MAP = (_a = {}, _a[MessageBarType.info] = "Info", _a[MessageBarType.warning] = "Info", _a[MessageBarType.error] = "ErrorBadge", _a[MessageBarType.blocked] = "Blocked2", _a[MessageBarType.severeWarning] = "Warning", _a[MessageBarType.success] = "Completed", _a);
var MessageBarBase = function(_super) {
  __extends(MessageBarBase2, _super);
  function MessageBarBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.state = {
      expandSingleLine: _this.expandSingleLine
    };
    return _this;
  }
  Object.defineProperty(MessageBarBase2.prototype, "classNames", {
    get: function() {
      var _a2 = this, theme = _a2.theme, className = _a2.className, messageBarType = _a2.messageBarType, actions = _a2.actions, truncated = _a2.truncated, isMultiline = _a2.isMultiline;
      var expandSingleLine = this.state.expandSingleLine;
      return getClassNames(this.styles, {
        theme: theme,
        messageBarType: messageBarType || MessageBarType.info,
        onDismiss: this.$listeners.dismiss !== void 0,
        actions: actions !== void 0,
        truncated: truncated,
        isMultiline: isMultiline,
        expandSingleLine: expandSingleLine,
        className: className
      });
    },
    enumerable: false,
    configurable: true
  });
  MessageBarBase2.prototype.onExpandSingleLine = function(value) {
    this.state.expandSingleLine = value;
  };
  MessageBarBase2.prototype.onClick = function() {
    this.state.expandSingleLine = !this.state.expandSingleLine;
  };
  MessageBarBase2.prototype.render = function(h) {
    var _a2 = this, theme = _a2.theme, classNames = _a2.classNames, messageBarType = _a2.messageBarType, actions = _a2.actions, truncated = _a2.truncated, isMultiline = _a2.isMultiline;
    var $iconSpan = h("div", { class: classNames.iconContainer }, [
      h("Icon", {
        class: classNames.icon,
        attrs: { iconName: ICON_MAP[messageBarType] }
      })
    ]);
    var $innerText = h("div", { class: classNames.text, attrs: { role: "status" } }, [
      h("span", { class: classNames.innerText }, [
        h("span", this.$slots.default)
      ])
    ]);
    var $expandSingleLine = !actions && truncated && h("div", { class: classNames.expandSingleLine }, [
      h(IconButton, {
        class: classNames.expand,
        attrs: {
          iconProps: { iconName: this.state.expandSingleLine ? "DoubleChevronUp" : "DoubleChevronDown" }
        },
        nativeOn: {
          click: this.onClick
        }
      })
    ]);
    var $singleLine = !isMultiline && this.$slots.actions && h("div", { class: classNames.actions }, this.$slots.actions);
    var $dismissDiv = this.$listeners.dismiss && isMultiline && h(IconButton, { class: classNames.dismissal, attrs: { iconProps: { iconName: "Clear" } } });
    var $dismissSingleLine = this.$listeners.dismiss && !isMultiline && h("div", {
      class: classNames.dismissSingleLine
    }, [
      h(IconButton, {
        class: classNames.dismissal,
        attrs: {
          iconProps: { iconName: "Clear" }
        }
      })
    ]);
    var $multiLine = isMultiline && this.$slots.actions && h("div", { class: classNames.actions }, this.$slots.actions);
    return h("div", { style: { background: theme.semanticColors.bodyBackground } }, [
      h("div", { class: classNames.root }, [
        h("div", { class: classNames.content }, [
          $iconSpan,
          $innerText,
          $expandSingleLine,
          $singleLine,
          $dismissDiv,
          $dismissSingleLine
        ]),
        $multiLine
      ])
    ]);
  };
  __decorate([
    Prop({ type: Number, default: MessageBarType.info }),
    __metadata("design:type", Number)
  ], MessageBarBase2.prototype, "messageBarType", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], MessageBarBase2.prototype, "isMultiline", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], MessageBarBase2.prototype, "actions", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], MessageBarBase2.prototype, "truncated", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], MessageBarBase2.prototype, "expandSingleLine", void 0);
  __decorate([
    Watch("expandSingleLine"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean]),
    __metadata("design:returntype", void 0)
  ], MessageBarBase2.prototype, "onExpandSingleLine", null);
  MessageBarBase2 = __decorate([
    Component({
      components: { Icon: Icon, IconButton: IconButton }
    })
  ], MessageBarBase2);
  return MessageBarBase2;
}(BaseComponent);

export { MessageBarBase };
