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

import Stack, { type StackProps } from '@material-hu/mui/Stack';

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

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

import useIds from '../../../hooks/useIds';
import useRoutes from '../../../hooks/useRoutes';
import { type Course } from '../../types';
import { showCertificate } from '../../utils';

import CompletionCertificateAction from './CompletionCertificateAction';

type CompletionActionsProps = StackProps & {
  course: Course;
};

const CompletionActions = ({
  course,
  ...stackProps
}: CompletionActionsProps) => {
  const { t } = useLokaliseTranslation('learning');
  const { pathId } = useIds();
  const navigate = useNavigate();
  const routes = useRoutes();

  const handleGoToCourses = () => navigate(routes.courses.list());

  const withCertificate = showCertificate(course);
  const withBackCourses = !pathId;

  return (
    <Stack
      {...stackProps}
      sx={{
        maxWidth: '260px',
        gap: 1.5,
        width: '100%',
        ...stackProps.sx,
      }}
    >
      {withCertificate && <CompletionCertificateAction course={course} />}
      {withBackCourses && (
        <Button
          fullWidth
          variant={withCertificate ? 'tertiary' : 'primary'}
          size="large"
          onClick={handleGoToCourses}
        >
          {t('course.go_back_to_courses')}
        </Button>
      )}
    </Stack>
  );
};

export default CompletionActions;