import { useQuery } from "@apollo/client/react";
import { GET_DOCUMENTS_BY_JOB } from "../../graphql/documents.queries";
import AlertComponent from "../alert/alert.component";
import LoadingSpinner from "../loading-spinner/loading-spinner.component";
import JobDocuments from "./jobs-documents-imgproxy-gallery.component";

/*
################################################################################################
 Developer Note:
 Known Technical Debt Item
         Modifications to this code requires complementary changes to the Cloudinary code. Cloudinary code will be removed upon completed migration.
################################################################################################
*/

export default function JobsDocumentsImgproxyContainer({ jobId, billId, documentsList, billsCallback }) {
  const { loading, error, data, refetch } = useQuery(GET_DOCUMENTS_BY_JOB, {
    variables: { jobId: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only",
    skip: !!billId
  });

  if (loading) return <LoadingSpinner />;
  if (error) return <AlertComponent type="error" title={error.message} />;

  return (
    <JobDocuments
      data={(data && data.documents) || documentsList || []}
      downloadIdentifier={data && data.jobs_by_pk.ro_number}
      totalSize={data && data.documents_aggregate.aggregate.sum.size}
      billId={billId}
      jobId={jobId}
      refetch={refetch}
      billsCallback={billsCallback}
    />
  );
}
