import { action, makeObservable, observable } from 'mobx';
import { addResizeObserver, isMobileDevice, } from '@wix/bex-core';
export class TabsResponsiveState {
    constructor(params) {
        // 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.
        this.badges = new Map();
        this.mode = 'tabs';
        this.panelMinWidth = 0;
        this.itemsCount = 0;
        this.itemPadding = 32;
        this.itemMaxWidth = 200;
        this.itemTextMinWidth = 48;
        this.itemBadgeMargin = 6;
        this.itemsMinWidths = [];
        this._externalAvailableWidth = null;
        this._onResize = action(() => {
            const { container } = this;
            const availableWidth = this._externalAvailableWidth ?? 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 = isMobileDevice();
        this.onResizeThrottled = params.container.lodash.throttle(() => window.requestAnimationFrame(this._onResize), 300);
        makeObservable(this, {
            mode: observable.ref,
            panelMinWidth: 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 = addResizeObserver(container, this.onResizeThrottled);
        this.onResizeThrottled();
        return () => {
            disposer?.();
        };
    }
}
//# sourceMappingURL=TabsResponsiveState.js.map