import { UploadOutlined } from "@ant-design/icons";
import { notification, Progress, Result, Space, Upload } from "antd";
import React, { useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import {
  selectBodyshop,
  selectCurrentUser,
} from "../../redux/user/user.selectors";
import formatBytes from "../../utils/formatbytes";
import { handleUpload } from "./documents-upload.utility";
const mapStateToProps = createStructuredSelector({
  currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
});

export function DocumentsUploadComponent({
  children,
  currentUser,
  bodyshop,
  jobId,
  tagsArray,
  billId,
  callbackAfterUpload,
  totalSize,
  ignoreSizeLimit = false,
}) {
  const { t } = useTranslation();
  const [fileList, setFileList] = useState([]);

  const pct = useMemo(() => {
    return parseInt(
      (totalSize / ((bodyshop && bodyshop.jobsizelimit) || 1)) * 100
    );
  }, [bodyshop, totalSize]);

  if (pct > 100 && !ignoreSizeLimit)
    return (
      <Result
        status="error"
        title={t("documents.labels.storageexceeded_title")}
        subTitle={t("documents.labels.storageexceeded")}
      />
    );

  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);
      }}
      beforeUpload={(file, fileList) => {
        if (ignoreSizeLimit) return true;
        const newFiles = fileList.reduce((acc, val) => acc + val.size, 0);
        const shouldStopUpload =
          (totalSize + newFiles) / ((bodyshop && bodyshop.jobsizelimit) || 1) >=
          1;

        //Check to see if old files plus newly uploaded ones will be too much.
        if (shouldStopUpload) {
          notification.open({
            key: "cannotuploaddocuments",
            type: "error",
            message: t("documents.labels.upload_limitexceeded_title"),
            description: t("documents.labels.upload_limitexceeded"),
          });
          return Upload.LIST_IGNORE;
        }
        return 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}
    >
      {children || (
        <>
          <p className="ant-upload-drag-icon">
            <UploadOutlined />
          </p>
          <p className="ant-upload-text">
            Click or drag files to this area to upload.
          </p>
          {!ignoreSizeLimit && (
            <Space wrap className="ant-upload-text">
              <Progress type="dashboard" percent={pct} size="small" />
              <span>
                {t("documents.labels.usage", {
                  percent: pct,
                  used: formatBytes(totalSize),
                  total: formatBytes(bodyshop && bodyshop.jobsizelimit),
                })}
              </span>
            </Space>
          )}
        </>
      )}
    </Upload.Dragger>
  );
}
export default connect(mapStateToProps, null)(DocumentsUploadComponent);