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({
    container: {
    width: '100%',
    },
    list: {
      background:'#fdfdfd'
    },
    listIcon: {
        marginRight: 15,
    },
})

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

const ProfileMenu = () => {
  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 className={classes.container}>
      <MenuList className={classes.list}>
        <CopyToClipboard onCopy={() => copied('Number')} text={number}>
           <MenuItem>
              <ListItemIcon className={classes.listIcon}>
                <PhoneIcon fontSize="medium" />
              </ListItemIcon>
              <ListItemText primary={number} secondary='Phone' />
            </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} defaultChecked={!mute} />
        </MenuItem>
        <Divider variant="inset" />
        <MenuItem style={{cursor:'default'}}>
          <ListItemIcon className={classes.listIcon}>
            <SortIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText primary={`Sort by Date`} />
          <Switch style={{ cursor:'pointer'}} onClick={handleSort} {...label} defaultChecked={sort} />
        </MenuItem>
        <Divider variant="inset"/>        
        <CopyToClipboard onCopy={() => copied('Username')} text={credentials}>
          <MenuItem style={{cursor:'default'}}>
            <ListItemIcon className={classes.listIcon}>
               <AlternateEmailIcon fontSize="medium" />
            </ListItemIcon>
            <ListItemText primary={credentials} secondary='Username' />
          </MenuItem>
        </CopyToClipboard>        
        <Divider/>
      </MenuList>
    </Paper>
  );
}

export default ProfileMenu