FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/HeaderBar/Buttons/DeleteModal/index.tsx

import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import { makeStyles } from '@material-ui/core'
import { useSelector } from 'react-redux';

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

const useStyles = makeStyles({
  modalDelete: {
    background: '#ffffff',
    position: 'absolute',
    content:'',
    width: '20%',
    height:'auto',
    left: '40%',
    bottom: '48.5%',
    borderRadius: 10,
    padding: 10,
    display: 'flex',
    flexDirection:'column'
  },  
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100vw',
    height: '100vh',
    zIndex: 100,
    backgroundColor: 'rgba(104, 105, 104, 0.6)',
    overflowY: 'hidden',
  },
  titleWrapper: {
    display: 'flex',
    justifyContent: 'flex-start',
    alignContent: 'center',
    alignItems:'center'
  },
})

const DeleteModal = ({setModal}:{setModal:any}) => {
  const classes = useStyles()
  const {name,lastName,avatarUrl,color} = useSelector(getChat)

  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel')  return setModal(false)
    if (id === 'deleteForMeAnd') console.log('deleteForMeAnd')
    if (id === 'deleteForMe') console.log('deleteForMeAnd')
  }  
  return (
    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
      <div className={classes.modalDelete}>
        <div className={classes.titleWrapper}>
          <Avatar alt={name} src={avatarUrl?`http://localhost:3000/${avatarUrl}`:undefined}
            sx={{ background: color, width: 38, height: 38,marginRight:2}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
          <h3 style={{color: '#2c2c2c'}}>Delete chat</h3>
         </div>
         <p style={{color: '#050505'}}>{`Are you sure you want to delete the
          chat with ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}?`}</p>
          <Button id='deleteForMeAnd' variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
            {`DELETE FOR ME AND ${`${firstLetter(name)}${slicedWord(name, 15, 1)} 
            ${firstLetter(lastName)}${slicedWord(lastName, 15, 1)}`}`}
          </Button>
          <Button id='deleteForMe' variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
            DELETE FOR ME
          </Button>         
          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:18}}>
             CANCEL
          </Button>
        </div>
      </div>      
   )
}

export default DeleteModal