import Divider from '@mui/material/Divider';
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 BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import ArchiveIcon from '@mui/icons-material/Archive';
import PermContactCalendarIcon from '@mui/icons-material/PermContactCalendar';
import SettingsIcon from '@mui/icons-material/Settings';
import Brightness3Icon from '@mui/icons-material/Brightness3';
import AnimationIcon from '@mui/icons-material/Animation';
import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import BugReportIcon from '@mui/icons-material/BugReport';
import Switch from '@mui/material/Switch';
import { makeStyles } from '@material-ui/core'

import Modal from '../../../reusableComponents/Modal'
import { ChangeEvent } from 'react';

const useStyles = makeStyles({
    container: {
      position: 'absolute',
      width: 270,
      maxWidth: '100%',
      top: 60,
      left: 15,
      zIndex: 10,
      visibility: 'visible',
    },
    list: {
      background:'#fdfdfd'
    },
    listItemLast: {
      textAlign: 'center',
    },
    listIcon: {
        marginRight: 15,
    },
    listIconText: {
        marginRight: 15,
        paddingLeft:6
    }
})

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

interface IContactsList {
  handleSelectedMenu: (i:number) => void
}

const MenuBar = ({handleSelectedMenu}:IContactsList) => {
  const classes = useStyles()
  const handleSwitch = (e: React.MouseEvent<HTMLElement>) => {
    e.stopPropagation()
    console.log('clicked switch input')
  }
  return (
    <Modal> 
      <Paper className={classes.container}>
      <MenuList className={classes.list}>
        <MenuItem onClick={() => handleSelectedMenu(0)}>
          <ListItemIcon className={classes.listIcon}>
            <BookmarkBorderIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Saved Messages</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(1)}>
          <ListItemIcon className={classes.listIcon}>
            <ArchiveIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Archived Chats</ListItemText>
        </MenuItem>
        <MenuItem  onClick={() => handleSelectedMenu(2)}>
          <ListItemIcon className={classes.listIcon}>
            <PermContactCalendarIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Contacts</ListItemText>
        </MenuItem>        
        <MenuItem onClick={() => handleSelectedMenu(3)}>
          <ListItemIcon className={classes.listIcon}>
            <SettingsIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Settings</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(4)}>
          <ListItemIcon className={classes.listIcon}>
            <Brightness3Icon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Night Mode</ListItemText>
          <Switch onClick={handleSwitch} {...label} />
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(5)}>
          <ListItemIcon className={classes.listIcon}>
            <AnimationIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Animations</ListItemText>
          <Switch onClick={handleSwitch} {...label} defaultChecked />
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(6)}>
          <ListItemIcon className={classes.listIcon}>
            <HelpOutlineIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Telegram Features</ListItemText>
        </MenuItem>              
        <MenuItem onClick={() => handleSelectedMenu(7)}>
          <ListItemIcon className={classes.listIcon}>
            <BugReportIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText>Report bug</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(8)}>
          <ListItemIcon className={classes.listIconText}>
            K
          </ListItemIcon>
          <ListItemText>Switch to K Version</ListItemText>
        </MenuItem>
        <MenuItem onClick={() => handleSelectedMenu(9)}>
          <ListItemIcon className={classes.listIconText}>
             W
          </ListItemIcon>
          <ListItemText>Switch to Old Version</ListItemText>
        </MenuItem >
        <Divider />
        <MenuItem onClick={() => handleSelectedMenu(10)}>
          <ListItemText secondary='Telegram WebZ 1.32.3' className={classes.listItemLast}/>
        </MenuItem>
      </MenuList>
      </Paper>
    </Modal> 
  );
}

export default MenuBar