import React from 'react';
import { observer } from 'mobx-react-lite';
import { Box, Button, Text, TextButton, TableToolbar, } from '@wix/design-system';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { setReorderModeState } from '../DragAndDrop/initReordeModeState';
import { ReorderModeDiscardChangesModal } from './ReorderModeDiscardChangesModal';
function _ReorderModeToolbar(props) {
    const { learnMoreUrl, reorderModeTitle, state } = props;
    const { translate: t } = useWixPatternsContainer();
    if (!state.reorderModeState) {
        return null;
    }
    return (React.createElement(TableToolbar, { removeVerticalPadding: true, dataHook: "reorder-mode-toolbar" },
        React.createElement(TableToolbar.ItemGroup, { position: "start" },
            React.createElement(TableToolbar.Item, null,
                React.createElement(Box, { gap: "SP1" },
                    React.createElement(Text, { size: "small", dataHook: "reorder-mode-toolbar-title" }, reorderModeTitle ||
                        t('cairo.dragAndDrop.reorderMode.toolbar.title')),
                    learnMoreUrl ? (React.createElement(TextButton, { dataHook: "reorder-mode-toolbar-learn-more-cta", underline: "always", size: "small", as: "a", rel: "noopener", target: "_blank", href: learnMoreUrl, onClick: () => state.reorderModeState?.reportLearnMoreClickedBiEvent() }, t('cairo.dragAndDrop.reorderMode.toolbar.title.learnMore'))) : undefined))),
        React.createElement(TableToolbar.ItemGroup, { position: "end" },
            React.createElement(TableToolbar.Item, null,
                React.createElement(Button, { dataHook: "reorder-mode-toolbar-cancel-cta", priority: "secondary", onClick: () => {
                        state.reorderModeState?.onBulkCancel();
                    } }, t('cairo.dragAndDrop.reorderMode.toolbar.cancel.cta')),
                React.createElement(ReorderModeDiscardChangesModal, { state: state.reorderModeState })),
            React.createElement(TableToolbar.Item, null,
                React.createElement(Button, { dataHook: "reorder-mode-toolbar-save-cta", onClick: () => {
                        state.reorderModeState?.onBulkSubmit();
                    } }, t('cairo.dragAndDrop.reorderMode.toolbar.save.cta'))))));
}
export const ReorderModeToolbarBase = observer(_ReorderModeToolbar);
export const ReorderModeToolbar = (props) => {
    const state = useToolbarCollectionContext();
    return React.createElement(ReorderModeToolbarBase, { state: state, ...props });
};
ReorderModeToolbar.displayName = 'ReorderModeToolbar';
ReorderModeToolbar.setReorderModeState = setReorderModeState;
//# sourceMappingURL=ReorderModeToolbar.js.map