FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/HeaderBar/Buttons/CallModal/index.tsx

import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import MinimizeIcon from '@mui/icons-material/Minimize';
import CropLandscapeIcon from '@mui/icons-material/CropLandscape';
import CloseIcon from '@mui/icons-material/Close';
import ScreenShareIcon from '@mui/icons-material/ScreenShare';
import StopScreenShareIcon from '@mui/icons-material/StopScreenShare';
import VideocamIcon from '@mui/icons-material/Videocam';
import VideocamOffIcon from '@mui/icons-material/VideocamOff';
import MicIcon from '@mui/icons-material/Mic';
import MicOffIcon from '@mui/icons-material/MicOff';
import CallEndIcon from '@mui/icons-material/CallEnd';

import { getChat } from '../../../../../../redux/chat/selector';
import { prodAwsS3,firstLetter,slicedWord } from '../../../../../../helpers'

const useStyles = makeStyles({
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
  },  
  modalCall: {
    background: 'rgb(5, 5, 5)',
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    justifyItems:"center",
    width: '36vw',
    height:'50vh',
    left: '32vw',
    bottom: '25vh',
    borderRadius: 7,
    padding: 7,
  },
  rightIcons: {
    display: 'flex',
    justifyContent: 'end',
    alignContent: 'center',
    alignItems: 'center',
    marginBottom: 50,
    width:'100%'
  }
})

const CallModal = ({setModalCall}:{setModalCall:any}) => {
  const classes = useStyles()
  const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)

  const handleDeleteModal = (e: any) => {
    // const id = e.target.id
    // if (id === 'overlay' || id === 'cancel')  return setModalCall(false)
    // if (id === 'delete') {
    //   setModalCall(false)
    // }
  }

  return (
    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
      <div className={classes.modalCall}>
        <div className={classes.rightIcons}>
          <MinimizeIcon style={{ color: '#ffffff',cursor:'pointer'}} fontSize='small' />
          <CropLandscapeIcon style={{ color: '#ffffff',marginLeft:12,cursor:'pointer' }} fontSize='small' />
          <CloseIcon style={{ color:'#ffffff',marginLeft:12,cursor:'pointer'}} fontSize='small' />
        </div>
        <ListItemAvatar>
          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 120, height: 120, marginRight: 2, fontSize:30}}>
             {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary={`${firstLetter(name)}${slicedWord(name, 15, 1)} 
          ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}
          primaryTypographyProps={{ color: '#ffffff', fontSize: 22, fontWeight: 500 }}
          secondary='ringing ...' secondaryTypographyProps={{color: '#ffffff',fontSize:17,marginBottom:20}}/>       
      </div>
    </div>      
   )
}

export default CallModal