import { IconCertificate } from '@material-hu/icons/tabler';

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

import useFormatDate from 'src/hooks/useFormatDate';
import useCertificate from 'src/pages/dashboard/learning/sessions/hooks/useCertificate';
import { type SessionDetail } from 'src/pages/dashboard/learning/sessions/types';
import { showCertificate } from 'src/pages/dashboard/learning/sessions/utils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import PdfViewer from 'src/components/attachment/PdfViewer';

const FinishedState = ({ session }: { session: SessionDetail }) => {
  const { t } = useLokaliseTranslation('learning');
  const { formatDate } = useFormatDate();

  const { file, download, close, isLoading } = useCertificate(session);

  return (
    <>
      <Alert
        title={`${t('session.title')} ${t('session.status.finished_one').toLowerCase()}`}
        description={t('session.finished_at', {
          date: formatDate(session.endDate),
        })}
        severity="highlight"
      />
      {showCertificate(session) && (
        <>
          {file && (
            <PdfViewer
              file={file}
              onClose={close}
              downloadFile
            />
          )}
          <Button
            variant="contained"
            onClick={download}
            startIcon={<IconCertificate />}
            loading={isLoading}
          >
            {t('common.view_certificate')}
          </Button>
        </>
      )}
    </>
  );
};

export default FinishedState;
