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 { usePrevious } from '../../../../../hooks';
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,
  type: string
}
const FilesMenu = ({setIsOpenMenu,setFile,setValue,setType,type}:IFilesMenu) => {
  const classes = useStyles()
  const prevType = usePrevious(type);
  const handleClose = (typeFile:string) => {
    setIsOpenMenu(false)
    setType(typeFile)
  }
  return (
    <MenuList className={classes.list}>
      <MenuItem onClick={() => handleClose('content')}>
        <UploadFile setFile={setFile} setValue={setValue} setType={setType} prevType={prevType} 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} setType={setType} prevType={prevType} accept='application/pdf,
        application/vnd.openxmlformats-officedocument.wordprocessingml.document'>
          <ListItemIcon className={classes.listIcon}>
            <InsertDriveFileIcon fontSize="medium" />
          </ListItemIcon>
          <ListItemText className={classes.listText}>Upload File</ListItemText>
        </UploadFile>
      </MenuItem>      
  </MenuList>
  );
}

export default FilesMenu