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 InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import { makeStyles } from '@material-ui/core'
import UploadFile from './UploadFile'

const useStyles = makeStyles({
  list: {
    background: '#fdfdfd',
  },
  listIcon: {
      position: 'absolute',
      left:0
  },
  listText: {
      position: 'absolute',
      left:40
  },  
})

interface IFilesMenu {
  setIsOpenMenu: any,
  setFile: any,
  setValue: any,
  setType: any
}
const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType}:IFilesMenu) => {
  const classes = useStyles()
  const handleClose = (type:string) => {
    setType(type)
    setIsOpenMenu(false)
  }
  
  return (
    <MenuList className={classes.list}>
      <MenuItem  onClick={() => handleClose('content')}>
        <UploadFile setFile={setFile} setValue={setValue} accept='image/*,video/*,audio/*'>
          <ListItemIcon className={classes.listIcon}>
            <InsertDriveFileIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText className={classes.listText}>Upload Image/Audio/Video</ListItemText>
        </UploadFile>
      </MenuItem>
      <MenuItem  onClick={() => handleClose('application')}>
        <UploadFile setFile={setFile} setValue={setValue} accept='application/pdf,application/text'>
          <ListItemIcon className={classes.listIcon}>
            <InsertDriveFileIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText className={classes.listText}>Upload File</ListItemText>
        </UploadFile>
      </MenuItem>      
  </MenuList>
  );
}

export default FilesMenu