bodyshop/client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

import { FileExcelFilled, SyncOutlined } from "@ant-design/icons";
import { Alert, Button, Card, Space } from "antd";
import React, { useEffect, useState } from "react";
import { Gallery } from "react-grid-gallery";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { getBillMedia, getJobMedia, toggleMediaSelected } from "../../redux/media/media.actions";
import { selectAllMedia } from "../../redux/media/media.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { CreateExplorerLinkForJob } from "../../utils/localmedia";
import DocumentsLocalUploadComponent from "../documents-local-upload/documents-local-upload.component";
import JobsDocumentsLocalDeleteButton from "./jobs-documents-local-gallery.delete.component";
import JobsLocalGalleryDownloadButton from "./jobs-documents-local-gallery.download";
import JobsDocumentsLocalGalleryReassign from "./jobs-documents-local-gallery.reassign.component";
import JobsDocumentsLocalGallerySelectAllComponent from "./jobs-documents-local-gallery.selectall.component";

import Lightbox from "react-image-lightbox";
import "react-image-lightbox/style.css";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  allMedia: selectAllMedia
});

const mapDispatchToProps = (dispatch) => ({
  getJobMedia: (id) => dispatch(getJobMedia(id)),
  getBillMedia: ({ jobid, invoice_number }) => {
    dispatch(getBillMedia({ jobid, invoice_number }));
  },
  toggleMediaSelected: ({ jobid, filename }) => dispatch(toggleMediaSelected({ jobid, filename }))
});

export default connect(mapStateToProps, mapDispatchToProps)(JobsDocumentsLocalGallery);

export function JobsDocumentsLocalGallery({
  bodyshop,
  toggleMediaSelected,
  getJobMedia,
  getBillMedia,
  allMedia,
  job,
  invoice_number,
  vendorid
}) {
  const { t } = useTranslation();
  const [modalState, setModalState] = useState({ open: false, index: 0 });
  useEffect(() => {
    if (job) {
      if (invoice_number) {
        getBillMedia({ jobid: job.id, invoice_number });
      } else {
        getJobMedia(job.id);
      }
    }
  }, [job, invoice_number, getJobMedia, getBillMedia]);
  let optimized;
  const jobMedia =
    allMedia && allMedia[job.id]
      ? allMedia[job.id].reduce(
          (acc, val) => {
            if (val.type && val.type.mime && val.type.mime.startsWith("image")) {
              acc.images.push({
                ...val,
                fullsize: val.src,
                src: val.thumbnail,
                height: val.thumbnailHeight,
                width: val.thumbnailWidth,
                ...(val.optimized && { src: val.optimized, fullsize: val.src })
              });
              if (val.optimized) optimized = true;
            } else {
              acc.other.push({
                ...val,
                fullsize: val.src,
                src: val.thumbnail,
                height: val.thumbnailHeight,
                width: val.thumbnailWidth,
                tags: [{ value: val.filename, title: val.filename }]
              });
            }
            return acc;
          },
          { images: [], other: [] }
        )
      : { images: [], other: [] };

  return (
    <div>
      <Space wrap>
        <Button
          onClick={() => {
            if (job) {
              if (invoice_number) {
                getBillMedia({ jobid: job.id, invoice_number });
              } else {
                getJobMedia(job.id);
              }
            }
          }}
        >
          <SyncOutlined />
        </Button>
        <a href={CreateExplorerLinkForJob({ jobid: job.id })}>
          <Button>{t("documents.labels.openinexplorer")}</Button>
        </a>
        <JobsDocumentsLocalGalleryReassign jobid={job.id} />
        <JobsDocumentsLocalGallerySelectAllComponent jobid={job.id} />
        <JobsLocalGalleryDownloadButton job={job} />
        <JobsDocumentsLocalDeleteButton jobid={job.id} />
      </Space>
      <Card>
        <DocumentsLocalUploadComponent job={job} invoice_number={invoice_number} vendorid={vendorid} allowAllTypes />
      </Card>
      <Card title={t("jobs.labels.documents-images")}>
        <Gallery
          images={jobMedia.images}
          onSelect={(index, image) => {
            toggleMediaSelected({ jobid: job.id, filename: image.filename });
          }}
          {...(optimized && {
            customControls: [
              <Alert style={{ margin: "4px" }} message={t("documents.labels.optimizedimage")} type="success" />
            ]
          })}
          onClick={(index) => {
            setModalState({ open: true, index: index });
            // const media = allMedia[job.id].find(
            //   (m) => m.optimized === item.src
            // );

            // window.open(
            //   media ? media.fullsize : item.fullsize,
            //   "_blank",
            //   "toolbar=0,location=0,menubar=0"
            // );
          }}
        />
      </Card>
      <Card title={t("jobs.labels.documents-other")}>
        <Gallery
          images={jobMedia.other}
          thumbnailStyle={() => {
            return {
              backgroundImage: <FileExcelFilled />,
              height: "100%",
              width: "100%",
              cursor: "pointer"
            };
          }}
          onClick={(index) => {
            window.open(jobMedia.other[index].fullsize, "_blank", "toolbar=0,location=0,menubar=0");
          }}
          onSelect={(index, image) => {
            toggleMediaSelected({ jobid: job.id, filename: image.filename });
          }}
        />
      </Card>
      {modalState.open && (
        <Lightbox
          mainSrc={jobMedia.images[modalState.index].fullsize}
          nextSrc={jobMedia.images[(modalState.index + 1) % jobMedia.images.length].fullsize}
          prevSrc={jobMedia.images[(modalState.index + jobMedia.images.length - 1) % jobMedia.images.length].fullsize}
          onCloseRequest={() => setModalState({ open: false, index: 0 })}
          onMovePrevRequest={() =>
            setModalState({
              ...modalState,
              index: (modalState.index + jobMedia.images.length - 1) % jobMedia.images.length
            })
          }
          onMoveNextRequest={() =>
            setModalState({
              ...modalState,
              index: (modalState.index + 1) % jobMedia.images.length
            })
          }
        />
      )}
    </div>
  );
}