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

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

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

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

import { LAYOUT_MAX_WIDTH } from '../../../constants';
import useIds from '../../../hooks/useIds';
import useRoutes from '../../../hooks/useRoutes';
import useGetPath from '../../../paths/hooks/useGetPath';
import { getPathStartCourse } from '../../../paths/utils';

import CourseCard from './CourseCard';

const ContinuePathFooter = () => {
  const navigate = useNavigate();
  const routes = useRoutes();
  const { t } = useLokaliseTranslation('learning');
  const { palette } = useTheme();
  const { pathId } = useIds();

  const { data: path, isLoading: isLoadingPath } = useGetPath({ pathId });

  const course = path && getPathStartCourse(path);

  const handleBack = () => navigate(routes.paths.list());

  return (
    <Stack
      sx={{
        backgroundColor: palette.new.background.layout.brand,
        maxHeight: 344,
        height: '100%',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'flex-start',
      }}
    >
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          maxWidth: LAYOUT_MAX_WIDTH,
          width: '100%',
          p: 3,
          gap: 2,
        }}
      >
        <HuTitle
          variant="L"
          title={t('path.continue')}
          sx={{
            width: '100%',
            '& .MuiTypography-root': {
              color: palette.new.text.neutral.brand,
            },
          }}
        />
        <CourseCard
          loading={isLoadingPath}
          course={course}
        />
        <Button
          size="large"
          variant="tertiary"
          onClick={handleBack}
        >
          {t('path.go_back_to_paths')}
        </Button>
      </Stack>
    </Stack>
  );
};

export default ContinuePathFooter;
