"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.TabsResponsiveState = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _mobx = require("mobx");
var _bexCore = require("@wix/bex-core");
class TabsResponsiveState {
  constructor(params) {
    (0, _defineProperty2.default)(this, "isMobile", void 0);
    (0, _defineProperty2.default)(this, "container", void 0);
    // We save the badges in a Map and not in an Array because the badge is optional
    // on a per-tab basis, but we still need to know the index of each badge.
    (0, _defineProperty2.default)(this, "badges", new Map());
    (0, _defineProperty2.default)(this, "mode", 'tabs');
    (0, _defineProperty2.default)(this, "panelMinWidth", 0);
    (0, _defineProperty2.default)(this, "itemsCount", 0);
    (0, _defineProperty2.default)(this, "itemPadding", 32);
    (0, _defineProperty2.default)(this, "itemMaxWidth", 200);
    (0, _defineProperty2.default)(this, "itemTextMinWidth", 48);
    (0, _defineProperty2.default)(this, "itemBadgeMargin", 6);
    (0, _defineProperty2.default)(this, "itemsMinWidths", []);
    (0, _defineProperty2.default)(this, "onResizeThrottled", void 0);
    (0, _defineProperty2.default)(this, "_externalAvailableWidth", null);
    (0, _defineProperty2.default)(this, "_onResize", (0, _mobx.action)(() => {
      const {
        container
      } = this;
      const availableWidth = this._externalAvailableWidth ?? (container == null ? void 0 : container.clientWidth) ?? 0;
      if (process.env.NODE_ENV === 'test') {
        return;
      }
      if (!container) {
        return;
      }
      if (this.isMobile) {
        this.mode = 'dropdown';
        return;
      }
      const nextPanelWidth = this.getPanelMinWidth();
      if (nextPanelWidth !== 0 && nextPanelWidth > this.panelMinWidth) {
        this.itemsMinWidths = this.getItemsMinWidth();
        this.panelMinWidth = nextPanelWidth;
      }
      if (this.panelMinWidth !== 0 && availableWidth < this.panelMinWidth) {
        this.mode = 'dropdown';
      } else {
        this.mode = 'tabs';
      }
    }));
    this.isMobile = (0, _bexCore.isMobileDevice)();
    this.onResizeThrottled = params.container.lodash.throttle(() => window.requestAnimationFrame(this._onResize), 300);
    (0, _mobx.makeObservable)(this, {
      mode: _mobx.observable.ref,
      panelMinWidth: _mobx.observable.ref
    });
  }
  getBadgesWidth() {
    return Array.from(this.badges.values()).reduce((sum, badge) => {
      return sum + badge.clientWidth + this.itemBadgeMargin;
    }, 0);
  }
  getItemsMinWidth() {
    const {
      itemTextMinWidth,
      itemBadgeMargin
    } = this;
    return Array.from({
      length: this.itemsCount
    }).map((_, index) => {
      const badge = this.badges.get(index);
      const maybeBadgeWidth = badge ? badge.clientWidth + itemBadgeMargin : 0;
      return itemTextMinWidth + maybeBadgeWidth;
    });
  }
  getPanelMinWidth() {
    const {
      itemsCount,
      itemTextMinWidth,
      itemPadding
    } = this;
    const itemMinWidth = itemTextMinWidth + itemPadding;
    const badgesWidth = this.getBadgesWidth();
    return itemsCount * itemMinWidth + badgesWidth;
  }
  setAvailableWidth(width) {
    this._externalAvailableWidth = width;
    this._onResize();
  }
  init({
    container,
    itemsCount
  }) {
    this.container = container;
    this.itemsCount = itemsCount;
    const disposer = (0, _bexCore.addResizeObserver)(container, this.onResizeThrottled);
    this.onResizeThrottled();
    return () => {
      disposer == null || disposer();
    };
  }
}
exports.TabsResponsiveState = TabsResponsiveState;
//# sourceMappingURL=TabsResponsiveState.js.map