import { useQuery } from "@apollo/client/react";
import { Result } from "antd";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { useParams } from "react-router-dom";
import AlertComponent from "../../components/alert/alert.component";
import JobCalculateTotals from "../../components/job-calculate-totals/job-calculate-totals.component";
import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
import NotFound from "../../components/not-found/not-found.component";
import RbacWrapper from "../../components/rbac-wrapper/rbac-wrapper.component";
import { QUERY_JOB_CLOSE_DETAILS } from "../../graphql/jobs.queries";
import { setBreadcrumbs, setJobReadOnly, setSelectedHeader } from "../../redux/application/application.actions";
import IsJobReadOnly from "../../utils/jobReadOnly";
import JobsCloseComponent from "./jobs-close.component";
import InstanceRenderManager from "../../utils/instanceRenderMgr";

const mapDispatchToProps = (dispatch) => ({
  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
  setSelectedHeader: (key) => dispatch(setSelectedHeader(key)),
  setJobReadOnly: (bool) => dispatch(setJobReadOnly(bool))
});

export function JobsCloseContainer({ setBreadcrumbs, setSelectedHeader, setJobReadOnly }) {
  const { jobId } = useParams();
  const { loading, error, data } = useQuery(QUERY_JOB_CLOSE_DETAILS, {
    variables: { id: jobId },
    fetchPolicy: "network-only",
    nextFetchPolicy: "network-only"
  });
  const { t } = useTranslation();
  useEffect(() => {
    if (data?.jobs_by_pk) {
      setJobReadOnly(IsJobReadOnly(data.jobs_by_pk));
    }
  }, [data, setJobReadOnly]);
  useEffect(() => {
    setSelectedHeader("activejobs");
    document.title = t("titles.jobs-close", {
      app: InstanceRenderManager({
        imex: "$t(titles.imexonline)",
        rome: "$t(titles.romeonline)"
      }),
      number: data ? data.jobs_by_pk?.ro_number : null
    });

    setBreadcrumbs([
      {
        link: `/manage/jobs/${jobId}/`,
        label: t("titles.bc.jobs")
      },
      {
        link: `/manage/jobs/${jobId}/`,
        label: t("titles.bc.jobs-detail", {
          number: data ? data.jobs_by_pk?.ro_number : null
        })
      },
      {
        link: `/manage/jobs/${jobId}/close`,
        label: t("titles.bc.jobs-close")
      }
    ]);
  }, [setBreadcrumbs, t, jobId, data, setSelectedHeader]);

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

  if (!data.jobs_by_pk.job_totals)
    return <Result title={t("jobs.errors.nofinancial")} extra={<JobCalculateTotals job={data.jobs_by_pk} />} />;

  return (
    <RbacWrapper action="jobs:close">
      <div>
        <JobsCloseComponent job={data ? data.jobs_by_pk : {}} />
      </div>
    </RbacWrapper>
  );
}

export default connect(null, mapDispatchToProps)(JobsCloseContainer);
