FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/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,useDispatch } from 'react-redux';

import { getChat } from '../../../../../../redux/chat/selector';
import { actionRemoveChat } from '../../../../../../redux/chat/action';
import { actionRightIsOpen } from '../../../../../../redux/control/action'
import { removeChatForBoth } from '../../../../../../api-data';
import { firstLetter,slicedWord,prodAwsS3 } 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 = ({setModalDelete}:{setModalDelete:any}) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const {name,lastName,avatarUrl,color,companionId} = useSelector(getChat)

  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel')  return setModalDelete(false)
    if (id === 'delete') {
      removeChatForBoth(companionId)
      setModalDelete(false)
      dispatch(actionRemoveChat())
      dispatch(actionRightIsOpen(''))
    }
  }

  return (
    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
      <div className={classes.modalDelete}>
        <div className={classes.titleWrapper}>
          <Avatar alt={name} src={avatarUrl?`${prodAwsS3}/${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='delete'  variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
            DELETE CHAT
          </Button>         
          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
             CANCEL
          </Button>
        </div>
      </div>      
   )
}

export default DeleteModal