import React, { useEffect, useRef, useState } from 'react';
import { Box } from '@wix/design-system';
import { observer } from 'mobx-react-lite';
import { InitialLoadingConditional } from '../InitialLoadingConditional';
import { CollectionToolbarSkeletonItem } from './CollectionToolbarSkeletonItem';
import { ToolbarLeftGroupState } from '../../state/Toolbar/ToolbarLeftGroupState';
function _CollectionToolbarLeftGroup(props) {
    const { state, left, viewsToolbarItem, filtersElement, mode } = props;
    const { toolbar: { responsive }, } = state;
    const isLeftElementMode = mode === 'tabs' || mode === 'title';
    const shouldMeasure = isLeftElementMode && !responsive.responsiveDisabled;
    const container = useRef(null);
    const [leftGroupState] = useState(() => new ToolbarLeftGroupState({
        responsive,
        mode,
        minWidth: mode === 'title' ? 50 : 140,
        getTabsState: () => state.tabs,
    }));
    useEffect(() => {
        if (!shouldMeasure) {
            return;
        }
        responsive.leftGroupState = leftGroupState;
        const dispose = leftGroupState.init(container.current?.parentElement);
        return () => {
            dispose();
            responsive.leftGroupState = null;
        };
    }, [shouldMeasure]);
    const content = left ?? (React.createElement(React.Fragment, null,
        viewsToolbarItem && (React.createElement(InitialLoadingConditional, { state: state, loadingElement: React.createElement(CollectionToolbarSkeletonItem, { dataHook: "toolbar-views-skeleton", width: "100px" }) }, viewsToolbarItem)),
        !viewsToolbarItem ? filtersElement : undefined));
    if (isLeftElementMode && !responsive.responsiveDisabled) {
        return (React.createElement(Box, { ref: (element) => (container.current = element) }, content));
    }
    return React.createElement(React.Fragment, null, content);
}
export const CollectionToolbarLeftGroup = observer(_CollectionToolbarLeftGroup);
//# sourceMappingURL=CollectionToolbarLeftGroup.js.map