FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/ContactsList/ContactItem/index.tsx

import { makeStyles } from '@material-ui/core'
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { styled } from '@mui/material/styles';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
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 ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import {removeContact } from '../../../../../api-data';
import { actionIsOpen } from '../../../../../redux/control/action';
import { TContact } from '../../../../../typescript/redux/contacts/types';
import { TIsOpen } from '../../../../../typescript/redux/control/types';
import { firstLetter,slicedWord,timeStampEU,copied } from '../../../../../helpers';

const StyledMenu = styled((props:any) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }:any) => ({
  '& .MuiPaper-root': {
    borderRadius: 10,
    marginTop: theme.spacing(0),
    minWidth: 220,
    color:
      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
    boxShadow:
      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    '& .MuiMenu-list': {
      padding: '14px 14px',
    },
    '& .MuiMenuItem-root': {
      marginBottom: theme.spacing(1),
      '& .MuiSvgIcon-root': {
        fontSize: 21,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(4),
      }
    },
  },
}));

const useStyles = makeStyles({
  listItem_iconAvatar: {
    marginRight:10
  },
})
interface IContactItem {
  contact: TContact,
  selectedIndex: null | number,
  setSelectedIndex: (i: null | number) => void,
  i: number,
  handleListItemClick: (companionId: string) => void,
  isOpen: TIsOpen,
}
const  ContactItem = ({contact,selectedIndex,setSelectedIndex,i,handleListItemClick,isOpen}:IContactItem) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const open = Boolean(anchorEl);
  const { name, lastName, avatarUrl, color, companionId,createdAt, number,_id } = contact

  const handleClose = (type: string | undefined): void => {
    if (type === 'copy') copied('Number')
    if (type === 'delete') {
      removeContact(_id)
      isOpen === 'edit'&&dispatch(actionIsOpen('credentials'))
    }
    setAnchorEl(null)
    setSelectedIndex(null)
  }
  const handleContextMenu = (e: React.MouseEvent<HTMLDivElement>,i: number):void => {
    e.preventDefault()
    setAnchorEl(e.currentTarget)
    setSelectedIndex(i)
  } 

  return (
    <div>
      <ListItemButton
        selected={selectedIndex === i}
        onClick={() => handleListItemClick(companionId)}
        onContextMenu={(e) => handleContextMenu(e, i)}
      >
        <ListItemIcon className={classes.listItem_iconAvatar}>
        <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
          sx={{ background: color, width: 54, height: 54 }}>
          {!avatarUrl&&`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemIcon> 
        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)}
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          secondary={`Registered since ${timeStampEU(createdAt)}`} />
      </ListItemButton>      
      <StyledMenu
        id="demo-positioned-menu"
        aria-labelledby="demo-positioned-button"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
      >
        <CopyToClipboard onCopy={() => handleClose('copy')} text={number}>
          <MenuItem>
            <ContentCopyIcon />
             Copy number
          </MenuItem>
        </CopyToClipboard>
        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('delete')}>
            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
            Delete contact
        </MenuItem>        
      </StyledMenu>     
    </div>
  );
}
export default ContactItem