FINAL-PROJECT-FRONT/src/components/HomePage/LeftBar/SettingsBar/SettingsPicture/DeleteModal/index.tsx

import Button from '@mui/material/Button';
import { makeStyles } from '@material-ui/core'
import { useDispatch } from 'react-redux';
import { removeUserAvatar } from '../../../../../../api-data';
import { asyncCurrentUser } from '../../../../../../redux/authorization/operations';

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'
  },
})

interface IDeleteModal {
  setModal: (a: boolean) => void,
  index: number,
  setIndex: any
}
const DeleteModal = ({setModal,index,setIndex}:IDeleteModal) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  const handleDeleteModal = (e: any) => {
    const id = e.target.id
    if (id === 'overlay' || id === 'cancel') return setModal(false)
    if (id === 'delete') {
      removeUserAvatar(index)
      setIndex(index-1)
      setModal(false)
      dispatch(asyncCurrentUser())
    }
  }
  
  return (
    <div onClick={handleDeleteModal} className={classes.overlay} id='overlay'>
      <div className={classes.modalDelete}>
        <div className={classes.titleWrapper}>
          <h3 style={{color: '#2c2c2c'}}>Delete image</h3>
        </div>
        <p style={{color: '#050505'}}>{`Are you sure you want to delete the Image?`}</p>
        <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:22}}>
          DELETE IMAGE
        </Button>         
        <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:22}}>
          CANCEL
        </Button>
      </div>
    </div>      
   )
}

export default DeleteModal