import React, {useCallback} from 'react';
import {useDropzone} from 'react-dropzone';
import { Upload, message, Button } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

import { store} from '../store';
import { actionUploadFile } from '../action';

const InputUpLoadFile = () => {
  
  const onDrop = useCallback(acceptedFiles => {
    console.log('acceptedFiles', acceptedFiles);

    store.dispatch(actionUploadFile(acceptedFiles ))
  }, [])
  
  const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop})

  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <Button icon={<UploadOutlined />}> Выбрать файл</Button>
      }
    </div>
  )
}

export default InputUpLoadFile;