import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Grid from '@material-hu/mui/Grid';
import Tooltip from '@material-hu/mui/Tooltip';
import Typography from '@material-hu/mui/Typography';

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

export type InvitationLinkProps = {
  invitationLink: string;
};

export const InvitationLink: FC<InvitationLinkProps> = props => {
  const { invitationLink } = props;

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

  const { getCopiedString, copyUrlToClipboard, resetCopiedDelayed } =
    useCopyUrl();

  return (
    <Box
      sx={{
        width: '100%',
        borderRadius: '8px',
        border: '1px solid rgba(0, 0, 0, 0.23)',
      }}
    >
      <Grid container>
        <Grid
          item
          xs={9}
          sx={{ px: 1, py: 0.5, overflowWrap: 'break-word' }}
        >
          <Typography>{invitationLink}</Typography>
        </Grid>
        <Grid
          item
          xs={3}
          sx={{
            borderLeft: '1px solid rgba(0, 0, 0, 0.23)',
            px: 1,
            py: 0.5,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          <Tooltip
            title={getCopiedString(t('INVITE_TEAMMATES_LINK'))}
            onClose={() => resetCopiedDelayed()}
            placement="top"
          >
            <Typography
              onClick={() => copyUrlToClipboard(invitationLink, false)}
              sx={{ fontWeight: '700', cursor: 'pointer' }}
            >
              {t('COPY_LINK')}
            </Typography>
          </Tooltip>
        </Grid>
      </Grid>
    </Box>
  );
};

export default InvitationLink;
