import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Dialog from '@material-hu/mui/Dialog';
import DialogActions from '@material-hu/mui/DialogActions';
import Typography from '@material-hu/mui/Typography';

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

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

import CloseButton from 'src/components/dashboard/invitePeople/components/CloseButton';
import FeedbackInvitationsEmails from 'src/components/dashboard/invitePeople/components/FeedbackInvitationsEmails';

export type FeedbackInvitationsProps = {
  open: boolean;
  handleClose: () => void;
  handleInviteMorePeople: () => void;
  invitationsEmails: string[];
};

export const FeedbackInvitations: FC<FeedbackInvitationsProps> = props => {
  const { open, handleClose, handleInviteMorePeople, invitationsEmails } =
    props;

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

  return (
    <Dialog
      open={open}
      onClose={handleClose}
      maxWidth="sm"
      fullWidth
    >
      <Box sx={{ py: 2 }}>
        <Box
          sx={{
            display: 'flex',
            justifyContent: 'flex-end',
            width: '100%',
            px: 3,
          }}
        >
          <CloseButton handleOnClose={handleClose} />
        </Box>
        <FeedbackInvitationsEmails invitationsEmails={invitationsEmails} />
        <DialogActions sx={{ px: 3, py: 0 }}>
          <Button
            variant="outlined"
            onClick={handleInviteMorePeople}
            sx={{
              px: 1,
              borderRadius: '10px',
              color: '#000',
              borderColor: '#d4d2d2',
              '&:hover': {
                borderColor: '#d4d2d2',
                backgroundColor: '#e7e7e7',
              },
            }}
          >
            <Typography sx={{ fontSize: '16px', fontWeight: 600 }}>
              {t('INVITE_MORE_PEOPLE')}
            </Typography>
          </Button>
          <Button
            variant="contained"
            onClick={handleClose}
            color="success"
            sx={{ px: 4, borderRadius: '10px', ml: 2 }}
          >
            <Typography sx={{ fontSize: '16px', fontWeight: 600 }}>
              {t('general:done')}
            </Typography>
          </Button>
        </DialogActions>
      </Box>
    </Dialog>
  );
};

export default FeedbackInvitations;