import { useDropzone } from 'react-dropzone';
import { actionSetAvatar } from '../requests/actions';
import { connect } from 'react-redux';
import { useState, useCallback, useEffect } from 'react';

// const actionUploadFile = file => actionPromise('uploadFile', uploadFile(file));
// const CBasic = connect(null, {onLoad:actionUploadFile})(Basic  );


// const actionAvatar = (imageId) =>
//   async (dispatch, getState) => {
//     await dispatch (actionPromise('setAvatar', gql(`mutation setAvatar ( $imageId:ID, $user_id:String) {
//     UserUpsert(user:{_id: $user_id, avatar: {_id: $imageId}}){
//         _id, avatar{
//             _id
//         }
//     }}`, {imageId, user_id: getState().auth.payload?.sub?.id})))
//   }
// const actionAboutMe = (_id) =>
//     actionPromise('aboutMe', gql(`query {
//         userFindOne(user: {_id})}`))

// const actionSetAvatar = file =>
//   async (dispatch) => {
//     let result=await dispatch(actionUploadFile(file));
//     if (result) {
//      await dispatch(actionAvatar(result._id));
//       // dispatch(actionAboutMe(store.state.auth.payload));
//     }
    
//    }

function Basic({onLoad}) {
  const {acceptedFiles, getRootProps, getInputProps} = useDropzone();
  
  const files = acceptedFiles.map(file => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
    </li>
  ));
    useEffect(() => {acceptedFiles[0] && onLoad(acceptedFiles[0]) }, [acceptedFiles]);
      return (
    <section className="container">
      <div {...getRootProps({className: 'dropzone'})}>
        <input {...getInputProps()} />
        <p>Drag 'n' drop some files here, or click to select files</p>
      </div>
      <aside>
        <h4>Files</h4>
        <ul>{files}</ul>
      </aside>
    </section>
  );
};
// const CBasic = connect(null, { onLoad: actionSetAvatar })(Basic);
    
// export {CBasic};