/**
 * @Move (SQGZ)
 * Only used by the Onboardings module - move to Onboardings/
 */
import { useMutation, UseMutationOptions } from 'react-query';
import { useNavigate } from 'react-router-dom';

import { useModal } from '@material-hu/hooks/useModal';
import { useTheme } from '@material-hu/mui/styles';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

import Button from '@material-hu/components/design-system/Buttons/Button';

import useOnboardingsPermissions from 'src/pages/dashboard/Onboardings/hooks/useOnboardingsPermissions';
import { useLokaliseTranslation } from 'src/utils/i18n';

import AddQuizModal from 'src/components/AddQuizModal';
import ReportFilter from 'src/components/ReportFilter';

type Props = {
  quizzable: {
    name: string;
    id: number;
    hasQuiz: boolean;
  };
  handleDownloadReport?: (
    startDate?: string,
    endDate?: string,
    includedGroups?: [],
    includedUserFields?: [],
  ) => void;
  addQuizMutationOptions: UseMutationOptions<
    unknown,
    unknown,
    { title: string }
  >;
  quizPath: string;
};

const QuizButtons = ({
  quizzable,
  handleDownloadReport,
  addQuizMutationOptions,
  quizPath,
}: Props) => {
  const navigate = useNavigate();
  const { t } = useLokaliseTranslation(['backoffice_only']);
  const theme = useTheme();
  const isSmUp = useMediaQuery(theme.breakpoints.up('sm'));
  const { canCreateOnboardings, canEditOnboardings } =
    useOnboardingsPermissions();

  const {
    modal: reportModal,
    showModal: showReportModal,
    closeModal: closeReportModal,
  } = useModal(() => (
    <ReportFilter
      onSave={handleDownloadReport}
      onClose={closeReportModal}
      showUserFields
    />
  ));

  const navigateToQuiz = () => navigate(quizPath);

  const addQuizMutation = useMutation({
    ...addQuizMutationOptions,
    onSuccess: navigateToQuiz,
  });

  const {
    showModal: showAddQuizModal,
    modal: addQuizModal,
    closeModal: closeAddQuizModal,
  } = useModal(() => (
    <AddQuizModal
      closeAddQuizModal={closeAddQuizModal}
      addQuizMutation={addQuizMutation}
      quizzable={quizzable}
    />
  ));

  return quizzable.hasQuiz ? (
    <>
      {reportModal}
      <Button
        size="small"
        onClick={navigateToQuiz}
      >
        {t('backoffice_only:quiz_buttons.edit_quiz')}
      </Button>
      <>
        {isSmUp ? '-' : <br />}
        <Button
          size="small"
          sx={{ textAlign: 'left' }}
          onClick={() => showReportModal({ taskId: quizzable.id })}
        >
          {t('backoffice_only:quiz_buttons.download_quiz_report')}
        </Button>
      </>
    </>
  ) : (
    <>
      {addQuizModal}
      {(canCreateOnboardings || canEditOnboardings) && (
        <Button
          size="small"
          onClick={showAddQuizModal}
        >
          {t('backoffice_only:quiz_buttons.no_quiz')}
        </Button>
      )}
    </>
  );
};

export default QuizButtons;