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(acceptedFiles => {
        acceptedFiles.forEach(async (file) => {
            let result = await onUpload(file)
            onSet(result)
        })
    }, [onUpload])

    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()} />
                <p>Drag 'n' drop some files here, or click to select files</p>
                {maxFiles && <span>Max files: {maxFiles}</span>}
            </div>
            <aside>
                <h4>Files</h4>
                <ul>{files}</ul>
            </aside>
        </div>
    )
}

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