import React from 'react';
import { observer } from 'mobx-react-lite';
import {
  Box,
  Button,
  Text,
  TextButton,
  TableToolbar,
} from '@wix/design-system';
import { FiltersMap } from '@wix/bex-core';
import { useWixPatternsContainer } from '@wix/bex-core/react';
import { ToolbarCollectionState } from '../../state';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { setReorderModeState } from '../DragAndDrop/initReordeModeState';
import { ReorderModeDiscardChangesModal } from './ReorderModeDiscardChangesModal';

export interface ReorderModeToolbarBaseProps {
  learnMoreUrl?: string;
  reorderModeTitle?: string;
}

export interface ReorderModeToolbarProps<T, F extends FiltersMap>
  extends ReorderModeToolbarBaseProps {
  state: ToolbarCollectionState<T, F>;
}

function _ReorderModeToolbar<T, F extends FiltersMap>(
  props: ReorderModeToolbarProps<T, F>,
) {
  const { learnMoreUrl, reorderModeTitle, state } = props;

  const { translate: t } = useWixPatternsContainer();

  if (!state.reorderModeState) {
    return null;
  }

  return (
    <TableToolbar removeVerticalPadding dataHook="reorder-mode-toolbar">
      <TableToolbar.ItemGroup position="start">
        <TableToolbar.Item>
          <Box gap="SP1">
            <Text size="small" dataHook="reorder-mode-toolbar-title">
              {reorderModeTitle ||
                t('cairo.dragAndDrop.reorderMode.toolbar.title')}
            </Text>
            {learnMoreUrl ? (
              <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')}
              </TextButton>
            ) : undefined}
          </Box>
        </TableToolbar.Item>
      </TableToolbar.ItemGroup>
      <TableToolbar.ItemGroup position="end">
        <TableToolbar.Item>
          <Button
            dataHook="reorder-mode-toolbar-cancel-cta"
            priority="secondary"
            onClick={() => {
              state.reorderModeState?.onBulkCancel();
            }}
          >
            {t('cairo.dragAndDrop.reorderMode.toolbar.cancel.cta')}
          </Button>
          <ReorderModeDiscardChangesModal state={state.reorderModeState} />
        </TableToolbar.Item>
        <TableToolbar.Item>
          <Button
            dataHook="reorder-mode-toolbar-save-cta"
            onClick={() => {
              state.reorderModeState?.onBulkSubmit();
            }}
          >
            {t('cairo.dragAndDrop.reorderMode.toolbar.save.cta')}
          </Button>
        </TableToolbar.Item>
      </TableToolbar.ItemGroup>
    </TableToolbar>
  );
}

export const ReorderModeToolbarBase = observer(_ReorderModeToolbar);

export const ReorderModeToolbar = <T, F extends FiltersMap>(
  props: ReorderModeToolbarBaseProps,
) => {
  const state = useToolbarCollectionContext<T, F>();

  return <ReorderModeToolbarBase state={state} {...props} />;
};

ReorderModeToolbar.displayName = 'ReorderModeToolbar';
ReorderModeToolbar.setReorderModeState = setReorderModeState;