import { useMutation } from "@apollo/client";
import { Dropdown, Menu } from "antd";
import React from "react";
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();
    });
  };

  return (
    <Dropdown
      overlay={
        <Menu onClick={handleSetBodyPriority}>
          <Menu.Item key="clearBodyPriority">
            {t("production.actions.bodypriority-clear")}
          </Menu.Item>
          <Menu.SubMenu
            key="set"
            title={t("production.actions.bodypriority-set")}
          >
            {new Array(15).fill().map((value, index) => (
              <Menu.Item key={index + 1}>
                <div style={{ marginLeft: "2rem", marginRight: "2rem" }}>
                  {index + 1}
                </div>
              </Menu.Item>
            ))}
          </Menu.SubMenu>
        </Menu>
      }
      trigger={["click"]}
    >
      <div style={{ width: "100%", height: "19px" }}>
        {record.production_vars && record.production_vars.bodypriority}
      </div>
    </Dropdown>
  );
}
