import { UploadOutlined } from "@ant-design/icons";
import { Upload } from "antd";
import React, { useState } from "react";

import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "./documents-local-upload.utility";

const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
});

export function DocumentsLocalUploadComponent({
  children,
  currentUser,
  bodyshop,
  job,
  vendorid,
  invoice_number,
  callbackAfterUpload,
}) {
  const [fileList, setFileList] = useState([]);

  const handleDone = (uid) => {
    setTimeout(() => {
      setFileList((fileList) => fileList.filter((x) => x.uid !== uid));
    }, 2000);
  };

  return (
    <Upload.Dragger
      multiple={true}
      fileList={fileList}
      onChange={(f) => {
        if (f.event && f.event.percent === 100) handleDone(f.file.uid);

        setFileList(f.fileList);
      }}
      customRequest={(ev) =>
        handleUpload({
          ev,
          context: {
            jobid: job.id,
            vendorid,
            invoice_number,
            callback: callbackAfterUpload,
          },
        })
      }
      accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
    >
      {children || (
        <>
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
          <p className="ant-upload-text">
            Click or drag files to this area to upload.
          </p>
        </>
      )}
    </Upload.Dragger>
  );
}
export default connect(mapStateToProps, null)(DocumentsLocalUploadComponent);