import { useNavigate } from 'react-router-dom';

import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';

import CardContainer from '@material-hu/components/design-system/CardContainer';
import TaskFocusHeader from '@material-hu/components/design-system/Header/TaskFocus';
import Title from '@material-hu/components/design-system/Title';

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

import BaseLayout from '../../common/components/BaseLayout';
import SuccessCover from '../../components/SuccessCover';
import { LAYOUT_MAX_WIDTH } from '../../constants';
import useIds from '../../hooks/useIds';
import useRoutes from '../../hooks/useRoutes';
import useGetPath from '../hooks/useGetPath';
import usePathsTitle from '../hooks/usePathsTitle';
import { PathStatus } from '../types';
import { showCertificate } from '../utils';

import CompletionActions from './components/CompletionActions';

const PathCompletion = () => {
  const title = usePathsTitle();
  const navigate = useNavigate();
  const routes = useRoutes();
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { pathId } = useIds();
  const { user } = useAuth();

  const { data: path, isLoading: isLoadingPath } = useGetPath({
    pathId,
    options: {
      onError: () => {
        navigate(routes.paths.list());
      },
      onSuccess: data => {
        if (data.status !== PathStatus.FINISHED) {
          navigate(routes.paths.list());
        }
      },
    },
  });

  const handleBack = () => {
    if (!pathId) return;
    navigate(routes.paths.detail(pathId));
  };

  return (
    <BaseLayout title={title}>
      <Stack
        sx={{
          width: '100%',
          backgroundColor: palette.new.background.layout.default,
          height: '100%',
          minHeight: '100vh',
        }}
      >
        <TaskFocusHeader
          onBack={handleBack}
          title={path?.title ?? ''}
        />
        <Stack
          sx={{
            maxWidth: LAYOUT_MAX_WIDTH,
            width: '100%',
            flex: 1,
            mx: 'auto',
            p: 3,
            gap: 2,
            '& > div': {
              width: '100%',
            },
          }}
        >
          <CardContainer
            sx={{
              '& .MuiCardContent-root': {
                display: 'flex',
                flexDirection: 'column',
                justifyContent: 'center',
                alignItems: 'center',
                gap: 3,
              },
            }}
          >
            <SuccessCover />
            {!isLoadingPath && !!path && (
              <>
                <Title
                  title={t('common.user_congrats', {
                    userName: getFullName(user),
                  })}
                  description={
                    showCertificate(path)
                      ? t('path.finish.description_with_certificate')
                      : t('path.finish.description_without_certificate')
                  }
                  variant="M"
                  centered
                />
                <CompletionActions path={path} />
              </>
            )}
          </CardContainer>
        </Stack>
      </Stack>
    </BaseLayout>
  );
};

export default PathCompletion;