import React from 'react';
import S3 from 'react-aws-s3';

import {
  Form,
  Upload,
} from 'antd';

const normFile = (e) => {
  console.log('Upload event:', e);

  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

    const props = {
  onStart(file) {
    console.log('onStart', file, file.name);
  },
  onSuccess(res, file) {
    console.log('onSuccess', res, file.name,file);
  },
  onError(err) {
    console.log('onError', err);
  },
  onProgress({ percent }, file) {
    console.log('onProgress', `${percent}%`, file.name);
  },
  async customRequest({
    action,
    data,
    file,
    filename,
    headers,
    onError,
    onProgress,
    onSuccess,
    withCredentials,
  }) {
    const formData = new FormData();
    if (data) {
      Object.keys(data).forEach(key => {
        formData.append(key, data[key]);
      });
    }
    formData.append(filename, file);
    const configSettings = {
      bucketName: 'xxx',
      region: 'ap-south-1',
      accessKeyId: 'xxxxxxxxxx',
      secretAccessKey: 'xxxxxxxxxxxx',
    };
    var S3Client = new S3(configSettings);
    console.log('df', S3Client);
    await S3Client.uploadFile(file.originFileObj, filename)
      .then((data) => {
        console.log('data', data);
        onSuccess(data, fileName);
      })
      .catch(onError);

    return {
      abort() {
        console.log('upload progress is aborted.');
      },
    };
  },
};

const FileUpload = () => {
  return (
    <>
      <Form.Item
        name="dragger"
        valuePropName="fileList"
        getValueFromEvent={normFile}
        noStyle
        {...props}
      >
        <Upload.Dragger name="files" action="/upload.do" {...props}>
          <p className="ant-upload-drag-icon"></p>
          <p className="ant-upload-text">
            Click or drag file to this area to upload
          </p>
          <p className="ant-upload-hint">
            Support for a single or bulk upload.
          </p>
        </Upload.Dragger>
      </Form.Item>
    </>
  );
};

export default FileUpload;