import { useLazyQuery, useMutation } from "@apollo/client";
import { Button, Form, Popover, Space } from "antd";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { GET_JOB_BY_PK_QUICK_INTAKE, JOB_PRODUCTION_TOGGLE } from "../../graphql/jobs.queries";
import { insertAuditTrail } from "../../redux/application/application.actions";
import { selectJobReadOnly } from "../../redux/application/application.selectors";
import { selectBodyshop } from "../../redux/user/user.selectors";
import AuditTrailMapping from "../../utils/AuditTrailMappings";
import { DateTimeFormatterFunction } from "../../utils/DateFormatter";
import FormDateTimePickerComponent from "../form-date-time-picker/form-date-time-picker.component";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  //currentUser: selectCurrentUser,
  bodyshop: selectBodyshop,
  jobRO: selectJobReadOnly
});
const mapDispatchToProps = (dispatch) => ({
  insertAuditTrail: ({ jobid, operation }) => dispatch(insertAuditTrail({ jobid, operation }))
});

export function JobsDetailHeaderActionsToggleProduction({
  bodyshop,
  job,
  jobRO,
  refetch,
  closeParentMenu,
  insertAuditTrail
}) {
  const [scenario, setScenario] = useState(false);
  const [loading, setLoading] = useState(false);
  const [popOverVisible, setPopOverVisible] = useState(false);
  const [mutationUpdateJob] = useMutation(JOB_PRODUCTION_TOGGLE);
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const notification = useNotification();

  const [getJobDetails] = useLazyQuery(GET_JOB_BY_PK_QUICK_INTAKE, {
    variables: { id: job.id },
    onCompleted: (data) => {
      if (data?.jobs_by_pk) {
        form.setFieldsValue({
          actual_in: data.jobs_by_pk.actual_in ? data.jobs_by_pk.actual_in : dayjs(),
          scheduled_completion: data.jobs_by_pk.scheduled_completion,
          actual_completion: data.jobs_by_pk.actual_completion,
          scheduled_delivery: data.jobs_by_pk.scheduled_delivery,
          actual_delivery: data.jobs_by_pk.actual_delivery
        });
      }
    },
    fetchPolicy: "network-only"
  });

  useEffect(() => {
    //Figure out what scenario were in, populate accordingly
    if (job && bodyshop) {
      if (bodyshop.md_ro_statuses.pre_production_statuses.includes(job.status)) {
        setScenario("pre");
      } else if (bodyshop.md_ro_statuses.production_statuses.includes(job.status)) {
        setScenario("prod");
      } else {
        setScenario("post");
      }
    }
  }, [job, setScenario, bodyshop]);

  const handleConvert = async (values) => {
    setLoading(true);
    const res = await mutationUpdateJob({
      variables: {
        jobId: job.id,
        job: {
          ...values,
          status:
            scenario === "pre" ? bodyshop.md_ro_statuses.default_arrived : bodyshop.md_ro_statuses.default_delivered,
          inproduction: scenario === "pre" ? true : false
        }
      }
    });

    if (!res.errors) {
      notification["success"]({
        message: t("jobs.successes.converted")
      });

      insertAuditTrail({
        jobid: job.id,
        operation:
          scenario === "pre"
            ? AuditTrailMapping.jobintake(
                res.data.update_jobs.returning[0].status,
                DateTimeFormatterFunction(values.scheduled_completion)
              )
            : AuditTrailMapping.jobdelivery(
                res.data.update_jobs.returning[0].status,
                DateTimeFormatterFunction(values.actual_completion)
              )
      });
      setPopOverVisible(false);
      closeParentMenu();
      refetch();
    }
    setLoading(false);
  };

  const popMenu = (
    <div onClick={(e) => e.stopPropagation()}>
      <Form layout="vertical" form={form} onFinish={handleConvert}>
        {scenario === "pre" && (
          <>
            <Form.Item
              name={["actual_in"]}
              label={t("jobs.fields.actual_in")}
              rules={[
                {
                  required: true
                  //message: t("general.validation.required"),
                }
              ]}
            >
              <FormDateTimePickerComponent disabled={jobRO} />
            </Form.Item>
            <Form.Item
              name={["scheduled_completion"]}
              label={t("jobs.fields.scheduled_completion")}
              rules={[
                {
                  required: true
                  //message: t("general.validation.required"),
                }
              ]}
            >
              <FormDateTimePickerComponent disabled={jobRO} />
            </Form.Item>
            <Form.Item name={["scheduled_delivery"]} label={t("jobs.fields.scheduled_delivery")}>
              <FormDateTimePickerComponent disabled={jobRO} />
            </Form.Item>
          </>
        )}
        {scenario === "prod" && (
          <>
            <Form.Item
              name={["actual_completion"]}
              label={t("jobs.fields.actual_completion")}
              rules={[
                {
                  required: true
                  //message: t("general.validation.required"),
                }
              ]}
            >
              <FormDateTimePickerComponent disabled={jobRO} />
            </Form.Item>

            <Form.Item name={["actual_delivery"]} label={t("jobs.fields.actual_delivery")}>
              <FormDateTimePickerComponent disabled={jobRO} />
            </Form.Item>
          </>
        )}

        <Space wrap>
          <Button type="primary" onClick={() => form.submit()} loading={loading}>
            {t("general.actions.save")}
          </Button>
        </Space>
      </Form>
    </div>
  );

  return (
    <Popover //open={open}
      content={popMenu}
      open={popOverVisible}
      onOpenChange={setPopOverVisible}
      onClick={(e) => {
        getJobDetails();
        e.stopPropagation();
      }}
      getPopupContainer={(trigger) => trigger.parentNode}
      trigger="click"
    >
      {scenario === "pre" && t("jobs.actions.intake_quick")}
      {scenario === "prod" && t("jobs.actions.deliver_quick")}
    </Popover>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(JobsDetailHeaderActionsToggleProduction);