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 ProductionListColumnPaintPriority({ record }) {
  const { t } = useTranslation();

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleSetPaintPriority = (e) => {
    logImEXEvent("production_set_paint_priority");
    //  e.stopPropagation();
    const { key } = e;
    updateAlert({
      variables: {
        jobId: record.id,
        job: {
          production_vars: {
            ...record.production_vars,
            paintpriority: key === "clearPaintPriority" ? null : key,
          },
        },
      },
    }).then(() => {
      if (record.refetch) record.refetch();
    });
  };

  return (
    <Dropdown
      overlay={
        <Menu onClick={handleSetPaintPriority}>
          <Menu.Item key="clearPaintPriority">
            {t("production.actions.paintpriority-clear")}
          </Menu.Item>
          <Menu.SubMenu
            key="set"
            title={t("production.actions.paintpriority-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.paintpriority}
      </div>
    </Dropdown>
  );
}
