import { makeStyles } from '@material-ui/core'
import Button from '@mui/material/Button';
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';

const useStyles = makeStyles({
  container: {
    width: '100%',
    padding: '20px 10px 20px 10px',
    backgroundColor: '#ffffff',
    marginBottom: '280px',
  },
  modalDelete: {
    background: '#ffffff',
    position: 'absolute',
    content:'',
    width: '20%',
    height:'17%',
    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',
  },  
})
const Delete = ({_id}:{_id:string}) => {
  const classes = useStyles()
  const dispatch = useDispatch()
  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)
    }
  }
  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}>
            <p style={{color:'#020202'}}>Are you sure you want to delete this contact?</p>
            <Button id='delete' variant="text" color="error" style={{fontWeight:500,fontSize:18}}>
              DELETE CONTACT
            </Button>          
            <Button id='cancel' variant="text" style={{fontWeight:500,fontSize:18}}>
              CANCEL
            </Button>
          </div>
        </div>}
    </>
  );
}

export default Delete