import { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';
import { connect } from 'react-redux';
import { actionUploadFile } from '../actions';

export const MyDropzone = ({ maxFiles, onUpload, onSet }) => {
    const onDrop = useCallback(async acceptedFiles => {
        let files = []
        await Promise.all(acceptedFiles.map(async (file) => {
            let result = await onUpload(file)
            files.push(result)
            console.log(files)
        }))
        onSet(files)
    }, [onUpload, onSet])

    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({ onDrop, maxFiles: maxFiles })

    const files = acceptedFiles.map(file => (
        <li key={file.path}>
            {file.path} - {file.size} bytes
        </li>
    ))

    return (
        <div>
            <div {...getRootProps()}>
                <input {...getInputProps()} />
                <span>Drag 'n' drop here, or click to select</span>
            </div>
        </div>
    )
}

export const ConnectDropzone = connect(null, { onUpload: actionUploadFile })(MyDropzone)