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,
    overflowY: 'hidden',
  },  
  modalCall: {
    background: 'rgb(36, 36, 36)',
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    alignItems: 'center',
    justifyItems:"center",
    width: '34vw',
    // height:'50vh',
    left: '33vw',
    top: 0,
    // bottom: '25vh',
    borderRadius: 7,
  },
  rightIcons: {
    display: 'flex',
    justifyContent: 'end',
    alignContent: 'center',
    alignItems: 'center',
    marginBottom: 40,
    width:'100%'
  },
  rightIconWrapper: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    '&:hover': {
      backgroundColor:'rgb(54, 54, 54)'
    }
  },
  rightIconWrapperClose: {
    color: '#ffffff',
    cursor: 'pointer',
    padding:'3px 10px 3px 10px',
    borderTopRightRadius:7,
    '&:hover': {
      backgroundColor:'#f02a2a'
    }
  },
  statusCall: {
    color: "#dfdfdf",
    animation: 'ripple 4s infinite ease-in-out',
  },
  animatedDots: {
    fontWeight: 'bold',
    display:'inline-block',
    fontFamily: 'monospace',
    clipPath: 'inset(0 3ch 0 0)',
    animation: `$run 2s steps(5) infinite`,   
  },
  '@keyframes run': {
    to: {
       clipPath: 'inset(0 -1ch 0 0)'
    },
  },  
})

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}>
          <div className={classes.rightIconWrapper}>
            <MinimizeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapper}>
            <CropLandscapeIcon fontSize='small' />
          </div>
          <div className={classes.rightIconWrapperClose}>
            <CloseIcon fontSize='small' />
          </div>
        </div>
        <ListItemAvatar style={{marginBottom:15}}>
          <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: 20, fontWeight: 500 }} />
        <ListItemText secondary={<span className={classes.statusCall}>
            ringing<span className={classes.animatedDots}>
              ...</span>
          </span>}/>      
      </div>
    </div>      
   )
}

export default CallModal