import { Helmet } from 'react-helmet-async';
import { useNavigate } from 'react-router-dom';

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

import HuCardContainer from '@material-hu/components/design-system/CardContainer';
import HuTitle from '@material-hu/components/design-system/Title';

import { useAuth } from 'src/contexts/JWTContext';
import useHuGoTheme from 'src/hooks/useHuGoTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';
import { getFullName } from 'src/utils/userUtils';

import SuccessCover from '../../components/SuccessCover';
import { LAYOUT_MAX_WIDTH } from '../../constants';
import useIds from '../../hooks/useIds';
import useRoutes from '../../hooks/useRoutes';
import CourseHeader from '../Detail/components/CourseHeader';
import useCoursesTitle from '../hooks/useCoursesTitle';
import useGetCourse from '../hooks/useGetCourse';
import useSatisfactionSurvey from '../hooks/useSatisfactionSurvey';
import { CourseStatus } from '../types';

import CompletionActions from './components/CompletionActions';
import ContinuePathFooter from './components/ContinuePathFooter';

const CourseCompletion = () => {
  const HugoThemeProvider = useHuGoTheme();
  const title = useCoursesTitle();
  const navigate = useNavigate();
  const routes = useRoutes();
  const { t } = useLokaliseTranslation('learning');
  const { user } = useAuth();
  const { pathId, courseId } = useIds();

  const { course, isLoading: isLoadingCourse } = useGetCourse({
    courseId,
    options: {
      onError: () => {
        navigate(routes.courses.list());
      },
      onSuccess: data => {
        if (pathId && !data.learningPathIds.includes(pathId)) {
          navigate(routes.paths.list());
        }

        if (data.status !== CourseStatus.FINISHED) {
          navigate(routes.courses.list());
        }
      },
    },
  });

  const userName = getFullName(user);

  const { satisfactionSurveyModal, unsavedSatisfactionSurveyModal } =
    useSatisfactionSurvey(course);

  const getBackRoute = () => {
    if (!course?.id) return routes.courses.list();
    return routes.courses.detail(course.id);
  };
  return (
    <>
      <Helmet>
        <title>{formatTitle(title)}</title>
      </Helmet>
      <HugoThemeProvider>
        {satisfactionSurveyModal}
        {unsavedSatisfactionSurveyModal}
        <Stack
          sx={{
            width: '100%',
            backgroundColor: ({ palette }) =>
              palette.new.background.layout.default,
            height: '100%',
            minHeight: '100vh',
          }}
        >
          <CourseHeader
            title={course?.title ?? ''}
            backRoute={getBackRoute()}
          />
          <Stack
            sx={{
              maxWidth: LAYOUT_MAX_WIDTH,
              width: '100%',
              flex: 1,
              mx: 'auto',
              p: 3,
              gap: 2,
              '& > div': {
                width: '100%',
              },
            }}
          >
            <HuCardContainer
              sx={{
                '& .MuiCardContent-root': {
                  display: 'flex',
                  flexDirection: 'column',
                  justifyContent: 'center',
                  alignItems: 'center',
                  gap: 3,
                },
              }}
            >
              <SuccessCover />
              {!isLoadingCourse && !!course && (
                <>
                  <HuTitle
                    title={t('course.completed.title', { userName })}
                    description={t('course.completed.description', {
                      courseName: course?.title,
                    })}
                    variant="M"
                    centered
                  />
                  <CompletionActions course={course} />
                </>
              )}
            </HuCardContainer>
          </Stack>
          {!!pathId && <ContinuePathFooter />}
        </Stack>
      </HugoThemeProvider>
    </>
  );
};

export default CourseCompletion;