FINAL-PROJECT-FRONT/src/components/HomePage/RightBar/CredentialsList/ProfileMenu/index.tsx

import { useSelector } from 'react-redux';
import Paper from '@mui/material/Paper';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemIcon from '@mui/material/ListItemIcon';
import PhoneIcon from '@mui/icons-material/Phone';
import NotificationsIcon from '@mui/icons-material/Notifications';
import SortIcon from '@mui/icons-material/Sort';
import Switch from '@mui/material/Switch';
import Divider from '@mui/material/Divider';
import AlternateEmailIcon from '@mui/icons-material/AlternateEmail';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { makeStyles } from '@material-ui/core'

import { getChat } from '../../../../../redux/chat/selector'
import { muteChat,sortChat } from '../../../../../api-data'
import { copied,firstLetter,slicedWord } from '../../../../../helpers';

const useStyles = makeStyles({
    listIcon: {
        marginRight: 15,
    },
})

const label = { inputProps: { 'aria-label': 'Switch demo' } };

const ProfileMenu = ({disabled}:{disabled:boolean}) => {
  const classes = useStyles()
  const { number, mute,sort,companionId,originalName,originalLastName } = useSelector(getChat)
  const handleMute = () => muteChat(companionId)
  const handleSort = () =>  sortChat(companionId)
    
  const credentials = `${firstLetter(originalName)}${slicedWord(originalName, 15, 1)}
        ${firstLetter(originalLastName)}${slicedWord(originalLastName, 15, 1)}`
  
  return (
    <Paper>
      <MenuList>
        <CopyToClipboard onCopy={() => copied('Number')} text={number}>
           <MenuItem>
              <ListItemIcon className={classes.listIcon}>
                <PhoneIcon fontSize="medium" />
              </ListItemIcon>
              <ListItemText primary={number} secondary='Copy number' />
            </MenuItem>
          </CopyToClipboard>
        <Divider variant="inset" />
        <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>
          <MenuItem style={{cursor:'pointer'}}>
            <ListItemIcon className={classes.listIcon}>
               <AlternateEmailIcon fontSize="medium" />
            </ListItemIcon>
            <ListItemText primary={credentials} secondary='Username' />
          </MenuItem>
        </CopyToClipboard>
        <Divider variant="inset"/>         
        <MenuItem style={{cursor:'default'}}>
          <ListItemIcon className={classes.listIcon}>
            <NotificationsIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText primary='Notification' />
          <Switch style={{ cursor:'pointer'}} onClick={handleMute} {...label} checked={!mute} />
        </MenuItem>
        <Divider variant="inset" />
        <MenuItem disabled={disabled}  style={{cursor:'default'}}>
          <ListItemIcon className={classes.listIcon}>
            <SortIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText primary={`Sort by Date`} />
          <Switch style={{ cursor:'pointer'}} onClick={handleSort} {...label} checked={sort} />
        </MenuItem>        
      </MenuList>
    </Paper>
  );
}

export default ProfileMenu