import { __extends, __decorate, __metadata } from 'tslib';
import { Inject, Prop, Watch, Component } from 'vue-property-decorator';
import { hiddenContentStyle } from '@uifabric/styling';
import { StickyPositionType } from './Sticky.types.js';
import BaseComponent from '../BaseComponent.js';

var Sticky = function(_super) {
  __extends(Sticky2, _super);
  function Sticky2() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    _this.hiddenContentStyle = hiddenContentStyle;
    _this.isStickyTop = false;
    _this.isStickyBottom = false;
    _this.distanceFromTop = 0;
    _this.activeElement = null;
    return _this;
  }
  Sticky2.prototype.render = function(h) {
    var _a = this, canStickyTop = _a.canStickyTop, canStickyBottom = _a.canStickyBottom, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom, stickyClassName = _a.stickyClassName;
    var $stickyTop = canStickyTop && h("div", {
      ref: "stickyContentTop",
      style: { pointerEvents: isStickyTop ? "auto" : "none" },
      attrs: {
        "aria-hidden": !isStickyTop
      }
    }, [
      h("div", { style: this.getStickyPlaceholderHeight(isStickyTop) })
    ]);
    var $stickyBottom = canStickyBottom && h("div", {
      ref: "stickyContentBottom",
      style: { pointerEvents: isStickyBottom ? "auto" : "none" },
      attrs: {
        "aria-hidden": !isStickyBottom
      }
    }, [
      h("div", { style: this.getStickyPlaceholderHeight(isStickyBottom) })
    ]);
    var $placeHolder = h("div", {
      ref: "placeHolder",
      style: this.getNonStickyPlaceholderHeightAndWidth()
    }, [
      (isStickyTop || isStickyBottom) && h("span", {
        style: hiddenContentStyle
      }, this.$slots.default),
      h("div", {
        ref: "nonStickyContent",
        class: isStickyTop || isStickyBottom ? stickyClassName : void 0,
        style: this.getContentStyles(isStickyTop || isStickyBottom),
        attrs: {
          "aria-hidden": isStickyTop || isStickyBottom
        }
      }, this.$slots.default)
    ]);
    return h("div", { ref: "root" }, [
      $stickyTop,
      $stickyBottom,
      $placeHolder
    ]);
  };
  Sticky2.prototype.root = function() {
    return this.$refs.root;
  };
  Object.defineProperty(Sticky2.prototype, "canStickyTop", {
    get: function() {
      return this.stickyPosition === StickyPositionType.Both || this.stickyPosition === StickyPositionType.Header;
    },
    enumerable: false,
    configurable: true
  });
  Object.defineProperty(Sticky2.prototype, "canStickyBottom", {
    get: function() {
      return this.stickyPosition === StickyPositionType.Both || this.stickyPosition === StickyPositionType.Footer;
    },
    enumerable: false,
    configurable: true
  });
  Sticky2.prototype.syncScroll = function(container) {
    var nonStickyContent = this.$refs.nonStickyContent;
    if (nonStickyContent && this.isScrollSynced) {
      nonStickyContent.scrollLeft = container.scrollLeft;
    }
  };
  Sticky2.prototype.mounted = function() {
    var scrollablePane = this.context.scrollablePane;
    if (!scrollablePane) {
      return;
    }
    scrollablePane.subscribe(this._onScrollEvent);
    scrollablePane.addSticky(this);
  };
  Sticky2.prototype.beforeDestroy = function() {
    var scrollablePane = this.context.scrollablePane;
    if (!scrollablePane) {
      return;
    }
    scrollablePane.unsubscribe(this._onScrollEvent);
    scrollablePane.removeSticky(this);
  };
  Sticky2.prototype.onDistanceFromTopChanged = function(newVal, oldVal) {
    var scrollablePane = this.context.scrollablePane;
    if (!scrollablePane) {
      return;
    }
    if (newVal !== oldVal) {
      scrollablePane.sortSticky(this, true);
      scrollablePane.syncScrollSticky(this);
    }
  };
  Sticky2.prototype.onIsStickyTopChanged = function(newVal, oldVal) {
    var scrollablePane = this.context.scrollablePane;
    if (!scrollablePane) {
      return;
    }
    if (newVal !== oldVal) {
      if (this.activeElement) {
        this.activeElement.focus();
      }
      scrollablePane.updateStickyRefHeights();
      scrollablePane.syncScrollSticky(this);
    }
  };
  Sticky2.prototype.onIsStickyBottomChanged = function(newVal, oldVal) {
    var scrollablePane = this.context.scrollablePane;
    if (!scrollablePane) {
      return;
    }
    if (newVal !== oldVal) {
      if (this.activeElement) {
        this.activeElement.focus();
      }
      scrollablePane.updateStickyRefHeights();
      scrollablePane.syncScrollSticky(this);
    }
  };
  Sticky2.prototype.addSticky = function(stickyContent) {
    if (this.$refs.nonStickyContent) {
      stickyContent.appendChild(this.$refs.nonStickyContent);
    }
  };
  Sticky2.prototype.resetSticky = function() {
    if (this.$refs.nonStickyContent && this.$refs.placeHolder) {
      this.$refs.placeHolder.appendChild(this.$refs.nonStickyContent);
    }
  };
  Sticky2.prototype.setDistanceFromTop = function(container) {
    var distanceFromTop = this._getNonStickyDistanceFromTop(container);
    this.distanceFromTop = distanceFromTop;
  };
  Sticky2.prototype.getContentStyles = function(isSticky) {
    return {
      backgroundColor: this.stickyBackgroundColor || this._getBackground(),
      overflow: isSticky ? "hidden" : ""
    };
  };
  Sticky2.prototype.getStickyPlaceholderHeight = function(isSticky) {
    var height = this.$refs.nonStickyContent ? this.$refs.nonStickyContent.offsetHeight : 0;
    return {
      visibility: isSticky ? "hidden" : "visible",
      height: isSticky ? 0 : height
    };
  };
  Sticky2.prototype.getNonStickyPlaceholderHeightAndWidth = function() {
    var _a = this, isStickyTop = _a.isStickyTop, isStickyBottom = _a.isStickyBottom;
    if (isStickyTop || isStickyBottom) {
      var height = 0;
      var width = 0;
      if (this.$refs.nonStickyContent && this.$refs.nonStickyContent.firstElementChild) {
        height = this.$refs.nonStickyContent.offsetHeight;
        width = this.$refs.nonStickyContent.firstElementChild.scrollWidth + (this.$refs.nonStickyContent.firstElementChild.offsetWidth - this.$refs.nonStickyContent.firstElementChild.clientWidth);
      }
      return {
        height: height,
        width: width
      };
    } else {
      return {};
    }
  };
  Sticky2.prototype._onScrollEvent = function(container, footerStickyContainer) {
    if (this.$refs.root && this.$refs.nonStickyContent) {
      var distanceFromTop = this._getNonStickyDistanceFromTop(container);
      var isStickyTop = false;
      var isStickyBottom = false;
      if (this.canStickyTop) {
        var distanceToStickTop = distanceFromTop - this._getStickyDistanceFromTop();
        isStickyTop = distanceToStickTop < container.scrollTop;
      }
      if (this.canStickyBottom && container.clientHeight - footerStickyContainer.offsetHeight <= distanceFromTop) {
        isStickyBottom = distanceFromTop - Math.floor(container.scrollTop) >= this._getStickyDistanceFromTopForFooter(container, footerStickyContainer);
      }
      if (document.activeElement && this.$refs.nonStickyContent.contains(document.activeElement) && (this.isStickyTop !== isStickyTop || this.isStickyBottom !== isStickyBottom)) {
        this.activeElement = document.activeElement;
      } else {
        this.activeElement = void 0;
      }
      this.isStickyTop = this.canStickyTop && isStickyTop;
      this.isStickyBottom = isStickyBottom;
      this.distanceFromTop = distanceFromTop;
    }
  };
  Sticky2.prototype._getStickyDistanceFromTop = function() {
    var distance = 0;
    if (this.$refs.stickyContentTop) {
      distance = this.$refs.stickyContentTop.offsetTop;
    }
    return distance;
  };
  Sticky2.prototype._getStickyDistanceFromTopForFooter = function(container, footerStickyVisibleContainer) {
    var distance = 0;
    if (this.$refs.stickyContentBottom) {
      distance = container.clientHeight - footerStickyVisibleContainer.offsetHeight + this.$refs.stickyContentBottom.offsetTop;
    }
    return distance;
  };
  Sticky2.prototype._getNonStickyDistanceFromTop = function(container) {
    var distance = 0;
    var currElem = this.$refs.root;
    if (currElem) {
      while (currElem && currElem.offsetParent !== container) {
        distance += currElem.offsetTop;
        currElem = currElem.offsetParent;
      }
      if (currElem && currElem.offsetParent === container) {
        distance += currElem.offsetTop;
      }
    }
    return distance;
  };
  Sticky2.prototype._getBackground = function() {
    if (!this.$refs.root) {
      return void 0;
    }
    var curr = this.$refs.root;
    while (window.getComputedStyle(curr).getPropertyValue("background-color") === "rgba(0, 0, 0, 0)" || window.getComputedStyle(curr).getPropertyValue("background-color") === "transparent") {
      if (curr.tagName === "HTML") {
        return void 0;
      }
      if (curr.parentElement) {
        curr = curr.parentElement;
      }
    }
    return window.getComputedStyle(curr).getPropertyValue("background-color");
  };
  __decorate([
    Inject({ from: "context", default: void 0 }),
    __metadata("design:type", Object)
  ], Sticky2.prototype, "context", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], Sticky2.prototype, "stickyClassName", void 0);
  __decorate([
    Prop({ type: String, default: null }),
    __metadata("design:type", String)
  ], Sticky2.prototype, "stickyBackgroundColor", void 0);
  __decorate([
    Prop({ type: Number, default: StickyPositionType.Both }),
    __metadata("design:type", Number)
  ], Sticky2.prototype, "stickyPosition", void 0);
  __decorate([
    Prop({ type: Boolean, default: true }),
    __metadata("design:type", Boolean)
  ], Sticky2.prototype, "isScrollSynced", void 0);
  __decorate([
    Watch("distanceFromTop"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Number, Number]),
    __metadata("design:returntype", void 0)
  ], Sticky2.prototype, "onDistanceFromTopChanged", null);
  __decorate([
    Watch("isStickyTop"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
  ], Sticky2.prototype, "onIsStickyTopChanged", null);
  __decorate([
    Watch("isStickyBottom"),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Boolean, Boolean]),
    __metadata("design:returntype", void 0)
  ], Sticky2.prototype, "onIsStickyBottomChanged", null);
  Sticky2 = __decorate([
    Component({})
  ], Sticky2);
  return Sticky2;
}(BaseComponent);

export { Sticky };
