import { ExclamationCircleFilled } from "@ant-design/icons";
import { Dropdown, Menu } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { useMutation } from "@apollo/client";
import { UPDATE_JOB } from "../../graphql/jobs.queries";
import { logImEXEvent } from "../../firebase/firebase.utils";

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

  const [updateAlert] = useMutation(UPDATE_JOB);

  const handleAlertToggle = (e) => {
    logImEXEvent("production_toggle_alert");
    //e.stopPropagation();
    updateAlert({
      variables: {
        jobId: record.id,
        job: {
          production_vars: {
            ...record.production_vars,
            alert:
              !!record.production_vars && !!record.production_vars.alert
                ? !record.production_vars.alert
                : true,
          },
        },
      },
    }).then(() => {
      if (record.refetch) record.refetch();
    });
  };

  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item key="toggleAlert" onClick={handleAlertToggle}>
            {record.production_vars && record.production_vars.alert
              ? t("production.labels.alertoff")
              : t("production.labels.alerton")}
          </Menu.Item>
        </Menu>
      }
      trigger={["contextMenu"]}
    >
      <div
        style={{
          //width: "100%",
          height: "19px",
        }}
      >
        {record.production_vars && record.production_vars.alert ? (
          <ExclamationCircleFilled className="production-alert" />
        ) : null}
      </div>
    </Dropdown>
  );
}
