import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Component } from 'vue-property-decorator';
import { getDocument, on, getWindow, doesElementContainFocus, KeyCodes } from '@uifabric-vue/utilities';
import BaseComponent from '../BaseComponent.js';

var Popup = function(_super) {
  __extends(Popup2, _super);
  function Popup2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.needsVerticalScrollBar = false;
    _this._containsFocus = false;
    return _this;
  }
  Popup2.prototype.created = function() {
    this._originalFocusedElement = getDocument().activeElement;
  };
  Popup2.prototype.mounted = function() {
    if (this.$refs.current) {
      this._disposables.push(on(this.$refs.current, "focus", this._onFocus, true), on(this.$refs.current, "blur", this._onBlur, true));
      var currentWindow = getWindow(this.$refs.current);
      if (currentWindow) {
        this._disposables.push(on(currentWindow, "keydown", this._onKeyDown));
      }
      if (doesElementContainFocus(this.$refs.current)) {
        this._containsFocus = true;
      }
    }
    this._updateScrollBarAsync();
  };
  Popup2.prototype.updated = function() {
    this._updateScrollBarAsync();
    this._async.dispose();
  };
  Popup2.prototype.beforeDestroy = function() {
    if (this.shouldRestoreFocus && this._originalFocusedElement && this._containsFocus && this._originalFocusedElement !== window) {
      if (this._originalFocusedElement) {
        this._originalFocusedElement.focus();
      }
    }
  };
  Popup2.prototype.render = function(h, context) {
    var className = this.className;
    return h("div", {
      ref: "current",
      class: className,
      style: { overflowY: this.needsVerticalScrollBar ? "scroll" : void 0, outline: "none" },
      on: {
        keydown: this._onKeyDown
      }
    }, this.$slots.default);
  };
  Popup2.prototype._onKeyDown = function(ev) {
    switch (ev.which) {
      case KeyCodes.escape:
        if (this.onDismiss) {
          this.onDismiss(ev);
          ev.preventDefault();
          ev.stopPropagation();
        }
        break;
    }
  };
  Popup2.prototype._updateScrollBarAsync = function() {
    var _this = this;
    this._async.requestAnimationFrame(function() {
      _this._getScrollBar();
    });
  };
  Popup2.prototype._getScrollBar = function() {
    if (this.style && this.style.overflowY) {
      return;
    }
    var needsVerticalScrollBar = false;
    if (this.$refs.current && this.$refs.current.firstElementChild) {
      var rootHeight = this.$refs.current.clientHeight;
      var firstChildHeight = this.$refs.current.firstElementChild.clientHeight;
      if (rootHeight > 0 && firstChildHeight > rootHeight) {
        needsVerticalScrollBar = firstChildHeight - rootHeight > 1;
      }
    }
    if (this.needsVerticalScrollBar !== needsVerticalScrollBar) {
      this.needsVerticalScrollBar = needsVerticalScrollBar;
    }
  };
  Popup2.prototype._onFocus = function() {
    this._containsFocus = true;
  };
  Popup2.prototype._onBlur = function(ev) {
    if (this.$refs.current && this.$refs.current.contains(ev.relatedTarget)) {
      this._containsFocus = false;
    }
  };
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], Popup2.prototype, "shouldRestoreFocus", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], Popup2.prototype, "onDismiss", void 0);
  Popup2 = __decorate([
    Component({
      components: {}
    })
  ], Popup2);
  return Popup2;
}(BaseComponent);

export { Popup };
