FINAL-PROJECT-FRONT/src/components/HomePage/CentralBar/HeaderBar/Buttons/MenuList/index.tsx

import { useState } from 'react';
import { useSelector } from 'react-redux';
import { styled } from '@mui/material/styles';
import IconButton from '@mui/material/IconButton';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
import VolumeOffIcon from '@mui/icons-material/VolumeOff';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import CheckBoxIcon from '@mui/icons-material/CheckBox';

import { getChat } from '../../../../../../redux/chat/selector'
import { muteChat } from '../../../../../../api-data'

const StyledMenu = styled((props:any) => (
  <Menu
    elevation={0}
    anchorOrigin={{
      vertical: 'top',
      horizontal: 'right',
    }}
    transformOrigin={{
      vertical: 'bottom',
      horizontal: 'right',
    }}
    {...props}
  />
))(({ theme }:any) => ({
  '& .MuiPaper-root': {
    borderRadius: 10,
    marginTop: theme.spacing(-2),
    minWidth: 220,
    color:
      theme.palette.mode === 'light' ? 'rgb(55, 65, 81)' : theme.palette.grey[500],
    boxShadow:
      'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
    '& .MuiMenu-list': {
      padding: '14px 14px',
    },
    '& .MuiMenuItem-root': {
      marginBottom: theme.spacing(1),
      '& .MuiSvgIcon-root': {
        fontSize: 21,
        color: theme.palette.text.secondary,
        marginRight: theme.spacing(4),
      }
    },
  },
}));

interface IMenuList {
  setModalDelete:any,
  setIsSomeSelected: React.Dispatch<React.SetStateAction<boolean>>,
}

const MenuList = ({setModalDelete,setIsSomeSelected}:IMenuList) => {
  const [anchorEl, setAnchorEl] = useState<any>(null);
  const open = Boolean(anchorEl);
  const { companionId, mute } = useSelector(getChat)
  
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>): void => {
    e.stopPropagation()
    setAnchorEl(e.currentTarget)
  }

  const handleClose = (type: string | undefined): void => {
    if (type === 'mute') muteChat(companionId)
    if (type === 'deleteModal') setModalDelete(true)
    setAnchorEl(null)
  }

  return (
    <>
      <IconButton onClick={handleClick} aria-label="delete" size="medium">
        <MoreVertIcon fontSize='medium'/>
      </IconButton>
      <StyledMenu
        id="demo-positioned-menu"
        aria-labelledby="demo-positioned-button"
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
      >
        <MenuItem onClick={() => handleClose('mute')}>
          {mute ? <NotificationsNoneIcon /> : <VolumeOffIcon />}
          {mute ? 'Unmute':'Mute'}
        </MenuItem>
        <MenuItem onClick={() => {
            setIsSomeSelected(true)
            handleClose(undefined)
          }}>
            <CheckBoxIcon />
            Select message
        </MenuItem>        
        <MenuItem style={{color:'#f02a2a'}} onClick={() => handleClose('deleteModal')}>
            <DeleteOutlineIcon style={{color:'#f02a2a'}}/>
            Delete chat
        </MenuItem>        
      </StyledMenu>
    </>
  );
}

export default MenuList