import React, { useEffect, useState } from 'react';
import { runInAction } from 'mobx';
import { observer } from 'mobx-react-lite';
import { ChangeOrderSmall } from '@wix/wix-ui-icons-common';
import { MultiLevelSortingState } from '../../state';
import { MultiLevelSortingPanelEntry } from '../MultiLevelSortingPanel';
import { CounterBadgeButton } from '../CounterBadgeButton';
import { usePageContext } from '@wix/bex-core/react';
import { ResponsiveButton } from '../ResponsiveButton/ResponsiveButton';
export function _MultiLevelSortingCTAButton(props) {
    const { state } = props;
    const { panels, container: { translate: t, isPanelLayout }, toolbar: { responsive }, } = state;
    const { modalsContainerRef } = usePageContext();
    const [multiLevelSortingState] = useState(() => runInAction(() => (state.multiLevelSorting ??= new MultiLevelSortingState({
        table: state,
        container: state.container,
        modalsContainerRef,
    }))));
    useEffect(() => multiLevelSortingState.init(), []);
    useEffect(() => {
        panels.registerSidePanel('multiLevelSorting', MultiLevelSortingPanelEntry);
    }, []);
    return (React.createElement(CounterBadgeButton, { dataHook: "multi-level-sorting-button-counter", count: multiLevelSortingState.sortListSize },
        React.createElement(ResponsiveButton, { state: responsive.actions, shouldShrink: !isPanelLayout, icon: React.createElement(ChangeOrderSmall, null), dataHook: "multi-level-sorting-button", onClick: () => {
                const isOpen = panels.toggleSidePanel('multiLevelSorting');
                if (isOpen) {
                    multiLevelSortingState.reportSidePanelOpen();
                }
                else {
                    multiLevelSortingState.reportSidePanelClose({
                        origin: 'Sort CTA',
                    });
                }
            } }, t('cairo.table.advanced-sorting.button.cta'))));
}
export const MultiLevelSortingCTAButton = observer(_MultiLevelSortingCTAButton);
//# sourceMappingURL=MultiLevelSortingCTAButton.js.map