import { SyncOutlined } from "@ant-design/icons";
import { Button, Card, Space } from "antd";
import React, { useEffect } 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 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";

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();
  useEffect(() => {
    if (job) {
      if (invoice_number) {
        getBillMedia({ jobid: job.id, invoice_number });
      } else {
        getJobMedia(job.id);
      }
    }
  }, [job, invoice_number, getJobMedia, getBillMedia]);

  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} />
      </Space>
      <Card>
        <DocumentsLocalUploadComponent
          job={job}
          invoice_number={invoice_number}
          vendorid={vendorid}
        />
      </Card>
      <Card title={t("jobs.labels.documents-images")}>
        <Gallery
          images={(allMedia && allMedia[job.id]) || []}
          backdropClosesModal={true}
          onSelectImage={(index, image) => {
            toggleMediaSelected({ jobid: job.id, filename: image.filename });
          }}
          onClickImage={(props) => {
            window.open(
              props.target.src,
              "_blank",
              "toolbar=0,location=0,menubar=0"
            );
          }}
        />
      </Card>
    </div>
  );
}