import { makeStyles } from '@material-ui/core'
import React from 'react';
import { useDropzone } from 'react-dropzone';
import { useEffect } from 'react';

const useStyles = makeStyles({
  container: {
      width: '100%',
      position:'relative',
  },
    dropZone: {
        width: '100%',
        display: 'flex',
        position:'relative',
        height: 20,
        zIndex:10
  },
})

interface IUploadFile {
  children:React.ReactNode,
  setFile: any,
  setValue: any,
  accept: string
}
  
const UploadFile = ({children,setFile,setValue,accept}:IUploadFile) => {
  const classes = useStyles()
    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
        noDrag: true,
        accept
    });
      useEffect(() => {
        if (acceptedFiles.slice(-1)[0]) {
          setValue('')
          setFile(acceptedFiles.slice(-1)[0])
        }
      }, [setFile,setValue, acceptedFiles])
  
    return (
    <div className={classes.container} >
      {children}
      <div  {...getRootProps({ className: classes.dropZone })}>
        <input placeholder='Photo or Video' {...getInputProps()}/>
      </div>
    </div>
  );
}

export default UploadFile