import React, { useRef, useState, useCallback } from 'react'
import { useDropzone } from 'react-dropzone'

import '../styles/filepicker.css'

export const FilePicker = ({ fileMessage, dragMessage, setFiles, isFullWidth }) => {

    const fullWidth = isFullWidth && 'full-width'

    const onDrop = useCallback(acceptedFiles => {
        // Do something with the files

        setFiles(acceptedFiles)
    }, [])

    const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

    return (
        <div className={["filepicker", fullWidth].join(' ')} {...getRootProps()}>
            <input {...getInputProps()} />
            {
                isDragActive ?
                    <h5>{dragMessage ? dragMessage : 'Drop the files here ...'}</h5> :
                    <h5>{fileMessage ? fileMessage : 'Drop files or click to upload'}</h5>
            }
        </div>
    );

}