import React from "react";
import { Button, notification } from "antd";
import { useTranslation } from "react-i18next";
import { useMutation } from "@apollo/client";
import { UPDATE_JOBS } from "../../graphql/jobs.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";

export default function VehicleDetailUpdateJobsComponent({
  vehicle,
  selectedJobs,
  disabled,
}) {
  const { t } = useTranslation();
  const [updateJobs] = useMutation(UPDATE_JOBS);
  const handlecClick = (e) => {
    logImEXEvent("vehicle_update_jobs");

    updateJobs({
      variables: {
        jobIds: selectedJobs,
        fields: {
          plate_no: vehicle["plate_no"],
          plate_st: vehicle["plate_st"],
          v_vin: vehicle["v_vin"],
          v_model_yr: vehicle["v_model_yr"],
          v_model_desc: vehicle["v_model_desc"],
          v_make_desc: vehicle["v_make_desc"],
          v_color: vehicle["v_color"],
        },
      },
    })
      .then((response) => {
        notification["success"]({ message: t("jobs.successes.updated") });
      })
      .catch((error) => {
        notification["error"]({
          message: t("jobs.errors.updating", { error: JSON.stringify(error) }),
        });
      });
  };

  return (
    <Button disabled={disabled} onClick={handlecClick}>
      {t("owners.actions.update")}
    </Button>
  );
}
