import { __extends, __decorate, __metadata } from 'tslib';
import { Prop, Watch, Component } from 'vue-property-decorator';
import { PanelType } from './Panel.types.js';
import BaseComponent from '../BaseComponent.js';
import { classNamesFunction, getId, getRTL, elementContains } from '@uifabric-vue/utilities';
import { IconFontSizes } from '@uifabric/styling';
import { IconButton } from '../Button/IconButton/IconButton.js';
import { Layer } from '../Layer/Layer.js';
import { Overlay } from '../Overlay/Overlay.js';

var getClassNames = classNamesFunction();
var PanelVisibilityState;
(function(PanelVisibilityState2) {
  PanelVisibilityState2[PanelVisibilityState2["closed"] = 0] = "closed";
  PanelVisibilityState2[PanelVisibilityState2["animatingOpen"] = 1] = "animatingOpen";
  PanelVisibilityState2[PanelVisibilityState2["open"] = 2] = "open";
  PanelVisibilityState2[PanelVisibilityState2["animatingClosed"] = 3] = "animatingClosed";
})(PanelVisibilityState || (PanelVisibilityState = {}));
var PanelBase = function(_super) {
  __extends(PanelBase2, _super);
  function PanelBase2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.IconFontSizes = IconFontSizes;
    _this.isFooterSticky = false;
    _this.id = getId("Panel");
    _this.visibility = PanelVisibilityState.closed;
    _this.animationCallback = null;
    return _this;
  }
  PanelBase2.prototype.created = function() {
    window.addEventListener("resize", this.updateFooterPosition);
    if (this.shouldListenForOuterClick) {
      window.addEventListener("mousedown", this.dismissOnOuterClick, true);
    }
  };
  PanelBase2.prototype.onIsOpenUpdated = function(newVal, prevVal) {
    console.log("onIsOpenUpdated");
    if (newVal) {
      this.visibility = PanelVisibilityState.animatingOpen;
    }
  };
  PanelBase2.prototype.onVisibilityUpdated = function(newVal, prevVal) {
    console.log(newVal, prevVal);
    if (newVal !== prevVal) {
      this.clearExistingAnimationTimer();
      if (newVal === PanelVisibilityState.animatingOpen) {
        this.animateTo(PanelVisibilityState.open);
      } else if (newVal === PanelVisibilityState.animatingClosed) {
        this.animateTo(PanelVisibilityState.closed);
      }
    }
  };
  Object.defineProperty(PanelBase2.prototype, "shouldListenForOuterClick", {
    get: function() {
      return !!this.isBlocking && !!this.isOpen;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(PanelBase2.prototype, "classNames", {
    get: function() {
      var _a = this, styles = _a.styles, theme = _a.theme, _b = _a.className, className = _b === void 0 ? "" : _b, focusTrapZoneProps = _a.focusTrapZoneProps, hasCloseButton = _a.hasCloseButton, _c = _a.headerClassName, headerClassName = _c === void 0 ? "" : _c, isFooterSticky = _a.isFooterSticky, isFooterAtBottom = _a.isFooterAtBottom, isHiddenOnDismiss = _a.isHiddenOnDismiss, type = _a.type;
      var visibility = this.visibility;
      var isOpen = this.isActive;
      var isAnimating = visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;
      var isLeft = !!(type === PanelType.smallFixedNear || type === PanelType.customNear);
      var isRTL = getRTL(theme);
      var isOnRightSide = isRTL ? isLeft : !isLeft;
      return getClassNames(styles, {
        theme: theme,
        className: className,
        focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : void 0,
        hasCloseButton: hasCloseButton,
        headerClassName: headerClassName,
        isAnimating: isAnimating,
        isFooterSticky: isFooterSticky,
        isFooterAtBottom: isFooterAtBottom,
        isOnRightSide: isOnRightSide,
        isOpen: isOpen,
        isHiddenOnDismiss: isHiddenOnDismiss,
        type: type,
        hasCustomNavigation: false
      });
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(PanelBase2.prototype, "isAnimating", {
    get: function() {
      var visibility = this.visibility;
      return visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(PanelBase2.prototype, "isActive", {
    get: function() {
      return this.visibility === PanelVisibilityState.open || this.visibility === PanelVisibilityState.animatingOpen;
    },
    enumerable: false,
    configurable: true
  });
  PanelBase2.prototype.close = function() {
    console.log("close");
    console.log(this.isOpen, this.isActive, this.visibility);
    if (this.isOpen !== void 0)
      return;
    if (!this.isActive)
      return;
    console.log(this.visibility);
    this.visibility = PanelVisibilityState.animatingClosed;
  };
  PanelBase2.prototype.dismiss = function(ev) {
    console.log("dismiss");
    if (this.onDismiss) {
      this.onDismiss(ev);
    }
    if (!ev || ev && !ev.defaultPrevented) {
      this.close();
    }
  };
  PanelBase2.prototype.dismissOnOuterClick = function(ev) {
    var panel = this.$refs.panel;
    if (this.isActive && panel && !ev.defaultPrevented()) {
      if (!elementContains(panel, ev.target)) {
        if (this.onOuterClick) {
          this.onOuterClick();
          ev.preventDefault();
        } else {
          this.dismiss();
        }
      }
    }
  };
  PanelBase2.prototype.updateFooterPosition = function() {
    var scrollableContent = this.$refs.scrollableContent;
    if (scrollableContent) {
      var height = scrollableContent.clientHeight;
      var innerHeight_1 = scrollableContent.scrollHeight;
      this.isFooterSticky = height < innerHeight_1;
    }
  };
  PanelBase2.prototype.animateTo = function(newVisibilityState) {
    var _this = this;
    console.log("animateTo", newVisibilityState);
    this.animationCallback = this._async.setTimeout(function() {
      _this.visibility = newVisibilityState;
      _this._onTransitionComplete();
    }, 200);
  };
  PanelBase2.prototype.clearExistingAnimationTimer = function() {
    if (this.animationCallback !== null) {
      this._async.clearTimeout(this.animationCallback);
    }
  };
  PanelBase2.prototype._onTransitionComplete = function() {
    this.updateFooterPosition();
    if (this.visibility === PanelVisibilityState.open && this.onOpened) {
      this.onOpened();
    }
    if (this.visibility === PanelVisibilityState.closed && this.onDismissed) {
      this.onDismissed();
    }
  };
  PanelBase2.prototype.render = function(h) {
    var _a = this, classNames = _a.classNames, isOpen = _a.isOpen, isAnimating = _a.isAnimating, isHiddenOnDismiss = _a.isHiddenOnDismiss, isBlocking = _a.isBlocking, theme = _a.theme, headerText = _a.headerText;
    if (!isOpen && !isAnimating && !isHiddenOnDismiss)
      return;
    var $commands = h("div", {
      class: classNames.commands
    }, [
      h("div", {
        class: classNames.navigation
      }, [
        h(IconButton, {
          class: classNames.closeButton,
          attrs: {
            styles: {
              root: {
                height: "auto",
                width: "44px",
                color: theme.palette.neutralSecondary,
                fontSize: IconFontSizes.large
              },
              rootHovered: {
                color: theme.palette.neutralPrimary
              }
            },
            iconProps: { iconName: "Cancel" }
          },
          nativeOn: {
            click: this.dismiss
          }
        })
      ])
    ]);
    var $contentInner = h("div", { class: classNames.contentInner }, [
      h("div", { class: classNames.header }, [
        h("p", { class: classNames.headerText }, this.$slots.header || headerText)
      ]),
      h("div", {
        ref: "scrollableContent",
        class: classNames.scrollableContent
      }, [
        h("div", { class: classNames.content }, this.$slots.default)
      ])
    ]);
    return h(Layer, [
      h("div", {
        ref: "panel",
        class: classNames.root
      }, [
        isBlocking && isOpen && h(Overlay, { class: classNames.overlay }),
        h("div", { class: classNames.main }, [
          $commands,
          $contentInner
        ])
      ])
    ]);
  };
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], PanelBase2.prototype, "headerText", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], PanelBase2.prototype, "focusTrapZoneProps", void 0);
  __decorate([
    Prop(),
    __metadata("design:type", Object)
  ], PanelBase2.prototype, "headerClassName", void 0);
  __decorate([
    Prop({ type: Number, default: PanelType.smallFixedFar }),
    __metadata("design:type", Number)
  ], PanelBase2.prototype, "type", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], PanelBase2.prototype, "onDismiss", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], PanelBase2.prototype, "onDismissed", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], PanelBase2.prototype, "onOpened", void 0);
  __decorate([
    Prop({ type: Function, default: null }),
    __metadata("design:type", Function)
  ], PanelBase2.prototype, "onOuterClick", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], PanelBase2.prototype, "hasCloseButton", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], PanelBase2.prototype, "isFooterAtBottom", void 0);
  __decorate([
    Prop({ type: Boolean, default: null }),
    __metadata("design:type", Boolean)
  ], PanelBase2.prototype, "isOpen", void 0);
  __decorate([
    Prop({ type: Boolean, default: false }),
    __metadata("design:type", Boolean)
  ], PanelBase2.prototype, "isHiddenOnDismiss", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], PanelBase2.prototype, "isBlocking", void 0);
  __decorate([
    Watch("isOpen"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
  ], PanelBase2.prototype, "onIsOpenUpdated", null);
  __decorate([
    Watch("visibility"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
  ], PanelBase2.prototype, "onVisibilityUpdated", null);
  PanelBase2 = __decorate([
    Component
  ], PanelBase2);
  return PanelBase2;
}(BaseComponent);

export { PanelBase };
