import { FC } from 'react';

import CheckIcon from '@material-hu/icons/material/Check';
import TelegramIcon from '@material-hu/icons/material/Telegram';
import Box from '@material-hu/mui/Box';
import Typography from '@material-hu/mui/Typography';

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

export type FeedbackInvitationsEmailsProps = {
  invitationsEmails: string[];
};

export const FeedbackInvitationsEmails: FC<
  FeedbackInvitationsEmailsProps
> = props => {
  const { invitationsEmails } = props;

  const { t } = useLokaliseTranslation('invitePeople');

  return (
    <>
      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
        <Box
          sx={{
            height: '60px',
            width: '60px',
            borderRadius: '50%',
            backgroundColor: 'rgba(0, 0, 0, 0.04)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <CheckIcon sx={{ color: '#28a745' }} />
        </Box>
      </Box>
      <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1, mb: 1 }}>
        <Typography
          variant="h4"
          sx={{ fontWeight: 600 }}
        >
          {t('INVITATION_MESSAGE', { count: invitationsEmails.length })}
        </Typography>
      </Box>
      <Box sx={{ overflow: 'auto', maxHeight: '200px', m: 4 }}>
        {invitationsEmails.map(email => (
          <Box
            key={email}
            sx={{
              display: 'flex',
              alignItems: 'center',
              px: 2,
              mb: 2,
            }}
          >
            <Box
              sx={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                width: '36px',
                height: '36px',
                mr: 1,
                backgroundColor: 'rgba(0, 0, 0, 0.04)',
              }}
            >
              <TelegramIcon />
            </Box>
            <Typography sx={{ color: '#000', fontWeight: '600' }}>
              {email}
            </Typography>
          </Box>
        ))}
      </Box>
    </>
  );
};

export default FeedbackInvitationsEmails;
