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

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

import PdfFullScreen from '@material-hu/components/composed-components/PdfViewer/components/FullScreen';
import Button from '@material-hu/components/design-system/Buttons/Button';

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

import useRoutes from '../../../hooks/useRoutes';
import useCertificate from '../../hooks/useCertificate';
import { type Path } from '../../types';
import { showCertificate } from '../../utils';

type CompletionActionsProps = {
  path: Path;
};

const CompletionActions = ({ path }: CompletionActionsProps) => {
  const { t } = useLokaliseTranslation('learning');
  const navigate = useNavigate();
  const routes = useRoutes();

  const { file, open, close } = useCertificate(path);

  const handleGoToPaths = () => navigate(routes.paths.list());
  const handleViewCertificate = () => open();

  const withCerfificate = showCertificate(path);

  return (
    <Stack sx={{ maxWidth: '260px', gap: 1.5, width: '100%' }}>
      {file && (
        <PdfFullScreen
          name={file.name}
          file={file.url || ''}
          onClose={close}
        />
      )}
      {withCerfificate && (
        <Button
          fullWidth
          variant={'primary'}
          size="large"
          onClick={handleViewCertificate}
        >
          {t('common.view_certificate')}
        </Button>
      )}
      <Button
        fullWidth
        variant={withCerfificate ? 'tertiary' : 'primary'}
        size="large"
        onClick={handleGoToPaths}
      >
        {t('path.go_back_to_paths')}
      </Button>
    </Stack>
  );
};

export default CompletionActions;
