FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/RightListsAndBars/EditBar/Delete/index.tsx

import { makeStyles } from '@material-ui/core'
import Button from '@mui/material/Button';
import Avatar from '@mui/material/Avatar';
import MenuItem from '@mui/material/MenuItem';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import { useState } from 'react';
import { useDispatch } from 'react-redux';
import { actionIsOpen } from '../../../../../../redux/control/action'
import { removeContact } from '../../../../../../api-data';
import { TContact } from '../../../../../../typescript/redux/contacts/types';
import { slicedWord,firstLetter,prodBaseURL } from '../../../../../../helpers';
const useStyles = makeStyles({
  container: {
    width: '100%',
    padding: '20px 10px 20px 10px',
    backgroundColor: '#ffffff',
  },
  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 Delete = ({isContact}:{isContact:TContact}) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const {_id,avatarUrl,color,name,lastName} = isContact
  const [modal,setModal] = useState<boolean>(false)
  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel') return setModal(false)
    if (id === 'delete') {
      dispatch(actionIsOpen('credentials'))
      removeContact(_id)
      setModal(false)
    }
  }  
  const handleOpenModal = () => setModal(true)
  return (
    <>
        <ul className={classes.container}>
          <MenuItem onClick={handleOpenModal} style={{fontSize:19,color:'#f02a2a'}} >
            <DeleteOutlineIcon fontSize='medium' style={{marginRight:27}}/>
             Delete contact
          </MenuItem>        
        </ul>
        {modal&&<div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
      <div className={classes.modalDelete}>
        <div className={classes.titleWrapper}>
          <Avatar alt={name} src={avatarUrl?`${prodBaseURL}/${avatarUrl}`:undefined}
            sx={{ background: color, width: 38, height: 38,marginRight:2}}>
            {`${firstLetter(name)}${firstLetter(lastName)}`}
          </Avatar>
          <h3 style={{color: '#2c2c2c'}}>Delete contact</h3>
         </div>
          <p style={{ color: '#050505' }}>{`Are you sure you want to delete contact
            ${`${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 CONTACT
          </Button>         
          <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
             CANCEL
          </Button>
        </div>  
    </div>}
  </>
  );
}

export default Delete