import { makeStyles, Typography,InputLabel,ListItem,ListItemText ,ListItemIcon } from '@material-ui/core'
import FolderIcon from '@mui/icons-material/Folder';
import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
import { useDropzone } from 'react-dropzone';
import { useEffect } from 'react';

const useStyles = makeStyles({
  container: {
    width: '100%',
  },
  dropZone: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    width: '100%',
    padding: '10px',
    borderRadius: 10,
    cursor: 'pointer',
    marginBottom: 20,
    outline: '2px solid  #959696',
    '&:hover': {
      outline: 'dashed  rgb(41, 139, 231)',
    },
  },
  dropZoneActive: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    alignContent: 'center',
    justifyContent: 'center',
    width: '100%',
    padding: '10px',
    borderRadius: 10,
    cursor: 'pointer',
    marginBottom: 20,
    outline: '2px dashed  rgb(41, 139, 231)',
  },  
})

interface IUploadAvatar {
  setUpload: React.Dispatch<React.SetStateAction<any>>,
  upload: any,
  setSelfie: React.Dispatch<React.SetStateAction<any>>,
}
const  UploadAvatar = ({ setUpload,upload,setSelfie }: IUploadAvatar) => {
  
const {
    acceptedFiles,
    getRootProps,
    getInputProps
  } = useDropzone({
    accept: 'image/*',
  });

    useEffect(() => {
      setUpload(acceptedFiles[0])
      setSelfie(null)
  }, [setUpload,setSelfie,acceptedFiles])

  const classes = useStyles()

  return (
    <section className={classes.container} >
      <div {...getRootProps({ className: upload? classes.dropZoneActive:classes.dropZone})}>
        <InputLabel>Drag or drop avatar</InputLabel>
        <input {...getInputProps()}/>
        <AddAPhotoIcon fontSize='large'
          sx={{color: upload ? 'rgb(62, 149, 231)' : '#6b6b6b',margin:'15px 0px'}} />
        <Typography variant="h6" color="initial">image/*</Typography>
      </div>
    </section>
  );
}

export default UploadAvatar