FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/ChatBar/SendMessage/ForwardSearchList/ForwardList/ForwardItem/index.tsx

import { makeStyles } from '@material-ui/core'
import { styled } from '@mui/material/styles';
import ListItemButton from '@mui/material/ListItemButton';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import Badge from '@mui/material/Badge';

import { firstLetter, slicedWord, timeStampEU,prodAwsS3 } from '../../../../../../../../helpers';

const StyledBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    backgroundColor: '#44b700',
    color: '#44b700',
    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
    '&::after': {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      borderRadius: '50%',
      animation: 'ripple 1.2s infinite ease-in-out',
      border: '1px solid currentColor',
      content: '""',
    },
  },
  '@keyframes ripple': {
    '0%': {
      transform: 'scale(.8)',
      opacity: 1,
    },
    '100%': {
      transform: 'scale(2.4)',
      opacity: 0,
    },
  },
}));

const useStyles = makeStyles({
  listItem_iconAvatar: {
    marginRight:10
  },
})

interface IForwardItem {
  name: string,
  lastName: string,
  avatarUrl: string,
  color: string,
  online: string,
  companionId: string,
  handleForwardTo: (companionId: string) => void,
}
const ForwardItem = ({name,lastName,avatarUrl,color,online,companionId,handleForwardTo}:IForwardItem) => {
  const classes = useStyles()
  
  return (
    <div>
      <ListItemButton onClick={() => handleForwardTo(companionId)}>
        <ListItemIcon className={classes.listItem_iconAvatar}>
          <StyledBadge overlap="circular"  variant={online === 'true'?'dot':'standard'}
             anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}>
            <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
              sx={{ background: color, width: 54, height: 54 }}>
              {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
            </Avatar>
          </StyledBadge>
        </ListItemIcon> 
        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          secondaryTypographyProps={{ color: '#0379af' }} secondary={online === 'true' ?
          'online' : `last seen ${timeStampEU(online)}`} />         
        </ListItemButton>  
    </div>
  );
}
export default ForwardItem