/**
 * @Move (SQGZ)
 * Only used by QuizButtons - move with it to Onboardings/
 */
import { FormProvider, useForm } from 'react-hook-form';
import { UseMutationResult } from 'react-query';

import DialogActions from '@material-hu/mui/DialogActions';
import DialogContent from '@material-hu/mui/DialogContent';
import DialogTitle from '@material-hu/mui/DialogTitle';
import Divider from '@material-hu/mui/Divider';
import Typography from '@material-hu/mui/Typography';

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

import { useLokaliseTranslation } from 'src/utils/i18n';

import FormTextField from '../FormInputs/FormTextField';

type Props = {
  quizzable: { name: string };
  closeAddQuizModal: () => void;
  addQuizMutation: UseMutationResult<unknown, unknown, { title: string }>;
};

const AddQuizModal = ({
  quizzable,
  closeAddQuizModal,
  addQuizMutation,
}: Props) => {
  const { t } = useLokaliseTranslation(['backoffice_only']);
  const form = useForm({
    defaultValues: {
      title: t('add_quiz_modal.quiz_name', { name: quizzable.name }),
    },
  });
  const { title } = form.watch();

  return (
    <FormProvider {...form}>
      <DialogTitle>{t('backoffice_only:add_quiz_modal.new_quiz')}</DialogTitle>
      <DialogContent>
        <Typography variant="body2">
          {t('backoffice_only:add_quiz_modal.new_quiz_info')}
        </Typography>
        <Divider sx={{ my: 2 }} />
        <FormTextField
          name="title"
          margin="normal"
          fullWidth
          label={t('general:inputs.title.label')}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={closeAddQuizModal}>{t('general:cancel')}</Button>
        <Button
          variant="contained"
          loading={addQuizMutation.isLoading}
          onClick={() =>
            addQuizMutation.mutateAsync(
              { title },
              { onSettled: closeAddQuizModal },
            )
          }
        >
          {t('general:save')}
        </Button>
      </DialogActions>
    </FormProvider>
  );
};

export default AddQuizModal;