import { UploadOutlined } from "@ant-design/icons";
import { Upload } from "antd";
import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import { handleUpload } from "./documents-upload.utility";

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

export function DocumentsUploadComponent({
  children,
  currentUser,
  bodyshop,
  jobId,
  tagsArray,
  billId,
  callbackAfterUpload,
}) {
  return (
    <Upload.Dragger
      multiple={true}
      customRequest={(ev) =>
        handleUpload(ev, {
          bodyshop: bodyshop,
          uploaded_by: currentUser.email,
          jobId: jobId,
          billId: billId,
          tagsArray: tagsArray,
          callback: callbackAfterUpload,
        })
      }
      accept="audio/*, video/*, image/*, .pdf, .doc, .docx, .xls, .xlsx"
      // showUploadList={false}
    >
      {
        // <Button type="primary">
        //       <UploadOutlined />
        //     </Button>
      }
      {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)(DocumentsUploadComponent);