import { UploadOutlined } from "@ant-design/icons";
import { 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";
import LockWrapperComponent from "../lock-wrapper/lock-wrapper.component";
import { HasFeatureAccess } from "../feature-wrapper/feature-wrapper.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

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 notification = useNotification();

  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);
  };
  const hasMediaAccess = HasFeatureAccess({ bodyshop, featureName: "media" });

  return (
    <Upload.Dragger
      multiple={true}
      fileList={fileList}
      disabled={!hasMediaAccess}
      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
          },
          notification
        )
      }
      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">
            <LockWrapperComponent featureName="media">{t("documents.labels.dragtoupload")}</LockWrapperComponent>
          </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);