import { addResizeObserver } from '@wix/bex-core';
import { computed, makeObservable, observable, reaction } from 'mobx';
import { HorizontalSpaceAvailableState } from '../Responsive/HorizontalSpaceAvailableState';
import { ToolbarResponsivePriorityState } from './ToolbarResponsivePriorityState';
import { HorizontalOverflowState } from '../Responsive/HorizontalOverflowState';
export class ToolbarResponsiveState {
    get container() {
        return this.toolbar.toolbar.container;
    }
    constructor(params) {
        this.toolbar = params.toolbar;
        this.overflow = new HorizontalOverflowState({
            state: this,
        });
        this.search = new ToolbarResponsivePriorityState({
            responsive: this,
            getNextToShrink: () => this.actions,
            getNextToExpand: () => this.search,
            count: 1,
            minWidth: 140,
        });
        this.actions = new ToolbarResponsivePriorityState({
            responsive: this,
            getNextToShrink: () => this.filters,
            getNextToExpand: () => this.search,
            count: 2,
        });
        this.filters = new ToolbarResponsivePriorityState({
            responsive: this,
            getNextToShrink: () => this.filters,
            getNextToExpand: () => this.actions,
            count: 3,
        });
        this._nextToShrink = this.search;
        this._nextToExpand = this.search;
        this.actionsAvailableSpace = new HorizontalSpaceAvailableState({
            state: this,
        });
        makeObservable(this, {
            _nextToShrink: observable.ref,
            _nextToExpand: observable.ref,
            responsiveDisabled: computed,
        });
    }
    get responsiveDisabled() {
        const { toolbar: { toolbar: { _syncedProps }, }, container: { internalExperiments }, } = this;
        return (!_syncedProps?.useResponsiveLayout ||
            !internalExperiments?.enabled('specs.cairo.EnableResponsiveToolbar11420'));
    }
    init() {
        const { toolbar: { toolbar }, overflow, actionsAvailableSpace, responsiveDisabled, } = this;
        if (responsiveDisabled) {
            return;
        }
        const disposers = [
            addResizeObserver(toolbar.toolbarRect.element, actionsAvailableSpace._syncThrottled),
            reaction(() => ({
                _isOverflowing: overflow._isOverflowing,
                _scrollWidth: overflow._scrollWidth,
                _clientWidth: overflow._clientWidth,
            }), () => {
                this._nextToShrink._shrinkIfNeeded();
            }, {
                fireImmediately: true,
            }),
            reaction(() => actionsAvailableSpace.available, () => {
                this._nextToExpand._expandIfNeeded();
            }, {
                fireImmediately: true,
            }),
        ];
        return () => {
            disposers.forEach((d) => d?.());
        };
    }
}
//# sourceMappingURL=ToolbarResponsiveState.js.map