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

import { SyncOutlined, FileExcelFilled } 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>
  );
}