import { type TFunction, Trans } from 'react-i18next';

import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import HuDialog from '@material-hu/components/design-system/Dialog';

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

type RefreshCourseProgressModalProps = {
  onClose: () => void;
  onContinue: () => void;
};

const RefreshCourseProgressModal = ({
  onClose,
  onContinue,
}: RefreshCourseProgressModalProps) => {
  const { t } = useLokaliseTranslation('learning');
  const HugoThemeProvider = useHuGoTheme();

  return (
    <HugoThemeProvider>
      <HuDialog
        title={t('course.reset_progress.title')}
        body={
          <Stack sx={{ gap: 2 }}>
            <Typography variant="globalS">
              {t('course.reset_progress.description')}
            </Typography>
            <Typography variant="globalS">
              <Trans
                i18nKey={t('course.reset_progress.description_2')}
                t={t as TFunction}
                components={{
                  strong: (
                    <Typography
                      component="span"
                      fontWeight="bold"
                    />
                  ),
                }}
              />
            </Typography>
          </Stack>
        }
        onClose={onClose}
        primaryButtonProps={{
          children: t('general:understood'),
          onClick: () => {
            onContinue();
            onClose();
          },
        }}
        secondaryButtonProps={{
          children: t('general:exit'),
          onClick: onClose,
        }}
      />
    </HugoThemeProvider>
  );
};

export default RefreshCourseProgressModal;