text: /* eslint-disable import/no-unresolved */
  import { Icon } from '@iconify/react';
  import * as React from 'react';
  import Button from '@mui/material/Button';
  import Dialog from '@mui/material/Dialog';
  import DialogActions from '@mui/material/DialogActions';
  import DialogContent from '@mui/material/DialogContent';
  import DialogContentText from '@mui/material/DialogContentText';
  import DialogTitle from '@mui/material/DialogTitle';
  import useMediaQuery from '@mui/material/useMediaQuery';
  import { useTheme } from '@mui/material/styles';
  import { useRef, useState } from 'react';
  import editFill from '@iconify/icons-eva/edit-fill';
  import { Link as RouterLink } from 'react-router-dom';
  import trash2Outline from '@iconify/icons-eva/trash-2-outline';
  import moreVerticalFill from '@iconify/icons-eva/more-vertical-fill';
  // material
  import { Modal, Box, Menu, MenuItem, IconButton, ListItemIcon, ListItemText } from '@mui/material';
  import UpdateCompany from 'src/components/UpdateCompany';
  import Api from 'src/utils/Api';
  
  // ----------------------------------------------------------------------
  const style = {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)',
    width: 400,
    bgcolor: 'background.paper',
    border: '2px solid #000',
    boxShadow: 24,
    p: 4
  };
  
  export default function CompanyMoreMenu(props) {
    const ref = useRef(null);
    const [isOpen, setIsOpen] = useState(false);
    const handleOpen = () => setEditOpen(true);
    const [deleteOpen, setDeleteOpen] = React.useState(false);
    const [editOpen, setEditOpen] = React.useState(false);
    const theme = useTheme();
    const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
  
    const handleClickOpen = () => {
      setDeleteOpen(true);
    };
  
    const handleDeleteSubmit = () => {
      Api.deleteCompany(props.companyId).then((response) => {
        window.location.reload();
      });
    };
  
    const handleClose = () => {
      setDeleteOpen(false);
      setEditOpen(false);
    };
  
    return (
      <>
        <IconButton ref={ref} onClick={() => setIsOpen(true)}>
          <Icon icon={moreVerticalFill} width={20} height={20} />
        </IconButton>
  
        <Menu
          open={isOpen}
          anchorEl={ref.current}
          onClose={() => setIsOpen(false)}
          PaperProps={{
            sx: { width: 200, maxWidth: '100%' }
          }}
          anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
          transformOrigin={{ vertical: 'top', horizontal: 'right' }}
        >
          <MenuItem sx={{ color: 'text.secondary' }}>
            <ListItemIcon>
              <Icon icon={trash2Outline} width={24} height={24} />
            </ListItemIcon>
            <ListItemText
              primary="Delete"
              primaryTypographyProps={{ variant: 'body2' }}
              onClick={handleClickOpen}
            />
          </MenuItem>
          <Dialog
            fullScreen={fullScreen}
            open={deleteOpen}
            onClose={handleClose}
            aria-labelledby="responsive-dialog-title"
          >
            <DialogTitle id="responsive-dialog-title">Are you sure delete this company?</DialogTitle>
            <DialogContent>
              <DialogContentText>If you accept, this employee will delete.</DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button autoFocus onClick={handleClose}>
                Disagree
              </Button>
              <Button onClick={handleDeleteSubmit} autoFocus>
                Agree
              </Button>
            </DialogActions>
          </Dialog>
  
          <MenuItem component={RouterLink} to="#" sx={{ color: 'text.secondary' }}>
            <ListItemIcon>
              <Icon icon={editFill} width={24} height={24} />
            </ListItemIcon>
            <ListItemText
              primary="Edit"
              primaryTypographyProps={{ variant: 'body2' }}
              onClick={handleOpen}
            />
          </MenuItem>
        </Menu>
  
        <Modal
          open={editOpen}
          onClose={handleClose}
          aria-labelledby="modal-modal-title"
          aria-describedby="modal-modal-description"
        >
          <Box sx={style}>
            <UpdateCompany
              company={props.companies.find((company) => company.id === props.companyId)}
            />
          </Box>
        </Modal>
      </>
    );
  }
  