import { DownCircleFilled } from "@ant-design/icons";
import { useApolloClient, useMutation } from "@apollo/react-hooks";
import { Button, Dropdown, Menu, notification, Popconfirm } from "antd";
import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { Link, useHistory } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { DELETE_JOB } from "../../graphql/jobs.queries";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AddToProduction from "./jobs-detail-header-actions.addtoproduction.util";
import JobsDetaiLheaderCsi from "./jobs-detail-header-actions.csi.component";
import DuplicateJob from "./jobs-detail-header-actions.duplicate.util";
const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly,
});

const mapDispatchToProps = (dispatch) => ({
  setScheduleContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "schedule" })),
  setBillEnterContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "billEnter" })),
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
  setJobCostingContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "jobCosting" })),
});

export function JobsDetailHeaderActions({
  job,
  bodyshop,
  refetch,
  setScheduleContext,
  setBillEnterContext,
  setPaymentContext,
  setJobCostingContext,
  jobRO,
}) {
  const { t } = useTranslation();
  const client = useApolloClient();
  const history = useHistory();
  const [deleteJob] = useMutation(DELETE_JOB);
  const jobInProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.production_statuses.includes(job.status);
  }, [job, bodyshop.md_ro_statuses.production_statuses]);

  const jobInPreProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status);
  }, [job.status, bodyshop.md_ro_statuses.pre_production_statuses]);

  const jobInPostProduction = useMemo(() => {
    return bodyshop.md_ro_statuses.post_production_statuses.includes(
      job.status
    );
  }, [job.status, bodyshop.md_ro_statuses.post_production_statuses]);

  const statusmenu = (
    <Menu key="popovermenu">
      <Menu.Item
        disabled={!jobInPreProduction || !job.converted || jobRO}
        onClick={() => {
          logImEXEvent("job_header_schedule");

          setScheduleContext({
            actions: { refetch: refetch },
            context: {
              jobId: job.id,
              job: job,
            },
          });
        }}
      >
        {t("jobs.actions.schedule")}
      </Menu.Item>
      <Menu.Item
        disabled={
          !!job.intakechecklist ||
          !jobInPreProduction ||
          !job.converted ||
          jobRO
        }
      >
        {!!job.intakechecklist ||
        !jobInPreProduction ||
        !job.converted ||
        jobRO ? (
          t("jobs.actions.intake")
        ) : (
          <Link to={`/manage/jobs/${job.id}/intake`}>
            {t("jobs.actions.intake")}
          </Link>
        )}
      </Menu.Item>
      <Menu.Item disabled={!jobInProduction || jobRO}>
        {!jobInProduction ? (
          t("jobs.actions.deliver")
        ) : (
          <Link to={`/manage/jobs/${job.id}/deliver`}>
            {t("jobs.actions.deliver")}
          </Link>
        )}
      </Menu.Item>
      <Menu.Item
        key="enterpayments"
        disabled={jobRO}
        onClick={() => {
          logImEXEvent("job_header_enter_payment");

          setPaymentContext({
            actions: {},
            context: { jobid: job.id },
          });
        }}
      >
        {t("menus.header.enterpayment")}
      </Menu.Item>
      <Menu.Item key="cccontract" disabled={jobRO}>
        <Link
          to={{
            pathname: "/manage/courtesycars/contracts/new",
            state: { jobId: job.id },
          }}
        >
          {t("menus.jobsactions.newcccontract")}
        </Link>
      </Menu.Item>
      {job.inproduction ? (
        <Menu.Item
          key="addtoproduction"
          disabled={!!!job.converted || jobRO}
          onClick={() => AddToProduction(client, job.id, refetch, true)}
        >
          {t("jobs.actions.removefromproduction")}
        </Menu.Item>
      ) : (
        <Menu.Item
          key="addtoproduction"
          disabled={!!!job.converted || !!job.inproduction || jobRO}
          onClick={() => AddToProduction(client, job.id, refetch)}
        >
          {t("jobs.actions.addtoproduction")}
        </Menu.Item>
      )}
      <Menu.SubMenu title={t("menus.jobsactions.duplicate")}>
        <Menu.Item>
          <Popconfirm
            title={t("jobs.labels.duplicateconfirm")}
            okText="Yes"
            cancelText="No"
            onClick={(e) => e.stopPropagation()}
            onConfirm={() =>
              DuplicateJob(
                client,
                job.id,
                { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
                (newJobId) => {
                  history.push(`/manage/jobs/${newJobId}`);
                  notification["success"]({
                    message: t("jobs.successes.duplicated"),
                  });
                },
                true
              )
            }
            getPopupContainer={(trigger) => trigger.parentNode}
          >
            {t("menus.jobsactions.duplicate")}
          </Popconfirm>
        </Menu.Item>
        <Menu.Item>
          <Popconfirm
            title={t("jobs.labels.duplicateconfirm")}
            okText="Yes"
            cancelText="No"
            onClick={(e) => e.stopPropagation()}
            onConfirm={() =>
              DuplicateJob(
                client,
                job.id,
                { defaultOpenStatus: bodyshop.md_ro_statuses.default_imported },
                (newJobId) => {
                  history.push(`/manage/jobs/${newJobId}`);
                }
              )
            }
            getPopupContainer={(trigger) => trigger.parentNode}
          >
            {t("menus.jobsactions.duplicatenolines")}
          </Popconfirm>
        </Menu.Item>
      </Menu.SubMenu>

      <Menu.Item
        key="postbills"
        disabled={!job.converted}
        onClick={() => {
          logImEXEvent("job_header_enter_bills");

          setBillEnterContext({
            actions: { refetch: refetch },
            context: {
              job: job,
            },
          });
        }}
      >
        {t("jobs.actions.postbills")}
      </Menu.Item>
      <Menu.Item
        disabled={!!job.date_invoiced || !jobInPostProduction || jobRO}
        key="closejob"
      >
        {!!job.date_invoiced || !jobInPostProduction || jobRO ? (
          t("menus.jobsactions.closejob")
        ) : (
          <Link
            to={{
              pathname: `/manage/jobs/${job.id}/close`,
            }}
          >
            {t("menus.jobsactions.closejob")}
          </Link>
        )}
      </Menu.Item>
      <Menu.Item disabled={!!job.date_invoiced || jobRO} key="admin">
        {!!job.date_invoiced || jobRO ? (
          t("menus.jobsactions.admin")
        ) : (
          <Link
            to={{
              pathname: `/manage/jobs/${job.id}/admin`,
            }}
          >
            {t("menus.jobsactions.admin")}
          </Link>
        )}
      </Menu.Item>
      <JobsDetaiLheaderCsi job={job} />
      <Menu.Item
        key="jobcosting"
        onClick={() => {
          logImEXEvent("job_header_job_costing");

          setJobCostingContext({
            actions: { refetch: refetch },
            context: {
              jobId: job.id,
            },
          });
        }}
      >
        {t("jobs.labels.jobcosting")}
      </Menu.Item>
      {job && !job.converted && (
        <Menu.Item>
          <Popconfirm
            title={t("jobs.labels.deleteconfirm")}
            okText={t("general.labels.yes")}
            cancelText={t("general.labels.no")}
            onClick={(e) => e.stopPropagation()}
            onConfirm={async () => {
              //delete the job.
              const result = await deleteJob({ variables: { id: job.id } });

              if (!!!result.errors) {
                notification["success"]({
                  message: t("jobs.successes.delete"),
                });
                //go back to jobs list.
                history.push(`/manage/`);
              } else {
                notification["error"]({
                  message: t("jobs.errors.deleted", {
                    error: JSON.stringify(result.errors),
                  }),
                });
              }
            }}
            getPopupContainer={(trigger) => trigger.parentNode}
          >
            {t("menus.jobsactions.deletejob")}
          </Popconfirm>
        </Menu.Item>
      )}
    </Menu>
  );
  return (
    <Dropdown
      className="imex-flex-row__margin"
      overlay={statusmenu}
      trigger={["click"]}
      key="changestatus"
    >
      <Button>
        {t("general.labels.actions")} <DownCircleFilled />
      </Button>
    </Dropdown>
  );
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(JobsDetailHeaderActions);