import { Button } 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";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

export default function VehicleDetailUpdateJobsComponent({ vehicle, selectedJobs, disabled }) {
  const { t } = useTranslation();
  const [updateJobs] = useMutation(UPDATE_JOBS);
  const notification = useNotification();

  const handlecClick = () => {
    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(() => {
        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>
  );
}