import { FC } from 'react';
import { Trans } from 'react-i18next';

import CheckCircleOutlineIcon from '@material-hu/icons/material/CheckCircleOutline';
import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CircularProgress from '@material-hu/mui/CircularProgress';
import Container from '@material-hu/mui/Container';
import Typography from '@material-hu/mui/Typography';

import { useTranslation } from './i18n';

export type SuccessEventRegistrationProps = {
  confirmationCode: string;
  eventName: string;
  qrImage: string;
};

export const SuccessEventRegistration: FC<
  SuccessEventRegistrationProps
> = props => {
  const { confirmationCode, eventName, qrImage } = props;

  const { t } = useTranslation();

  return (
    <Container
      sx={{ py: 4 }}
      maxWidth="sm"
    >
      {!confirmationCode && (
        <Box
          sx={{
            display: 'flex',
            width: '100%',
            justifyContent: 'center',
            mt: 2,
          }}
        >
          <CircularProgress color="primary" />
        </Box>
      )}
      {confirmationCode && (
        <>
          <Card
            sx={{
              width: '100%',
              backgroundColor: '#edf7ed',
              borderRadius: '4px',
            }}
          >
            <Box sx={{ p: 3, display: 'flex' }}>
              <CheckCircleOutlineIcon
                sx={{ color: '#2e7d32', mr: 1, mt: 0.2 }}
                fontSize="small"
              />
              <Typography sx={{ color: '#1e4620' }}>
                <Trans
                  i18nKey="CONFIRM_EVENT_REGISTRATION"
                  values={{
                    eventname: eventName,
                    confirmationCode: confirmationCode,
                  }}
                  t={t}
                  components={{ bold: <strong /> }}
                />
              </Typography>
            </Box>
          </Card>
          {qrImage && (
            <Box
              component="img"
              src={`data:image/png;base64,${qrImage}`}
              alt=""
              sx={{
                mt: 3,
                display: 'block',
                marginLeft: 'auto',
                marginRight: 'auto',
                width: '200px',
              }}
            />
          )}
        </>
      )}
    </Container>
  );
};

export default SuccessEventRegistration;