import { useMutation } from "@apollo/client/react";
import { Dropdown } from "antd";
import { useTranslation } from "react-i18next";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";

export default function ProductionListColumnBodyPriority({ record }) {
  const { t } = useTranslation();

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleSetBodyPriority = (e) => {
    logImEXEvent("production_set_body_priority");
    //  e.stopPropagation();
    const { key } = e;
    updateAlert({
      variables: {
        jobId: record.id,
        job: {
          production_vars: {
            ...record.production_vars,
            bodypriority: key === "clearBodyPriority" ? null : key
          }
        }
      }
    }).then(() => {
      if (record.refetch) record.refetch();
    });
  };

  const menu = {
    items: [
      {
        key: "clearBodyPriority",
        label: t("production.actions.bodypriority-clear")
      },
      {
        key: "set",
        label: t("production.actions.bodypriority-set"),
        children: new Array(15).fill().map((value, index) => ({
          key: index + 1,
          label: <div style={{ marginLeft: "2rem", marginRight: "2rem" }}>{index + 1}</div>
        }))
      }
    ],
    onClick: handleSetBodyPriority
  };

  return (
    <Dropdown menu={menu} trigger={["click"]}>
      <div style={{ width: "100%", height: "19px", cursor: "pointer" }}>{record.production_vars?.bodypriority}</div>
    </Dropdown>
  );
}
