import { Popconfirm } from "antd";
import { DeleteFilled } from "@ant-design/icons";
import { DELETE_TIME_TICKET } from "../../graphql/timetickets.queries";
import { useTranslation } from "react-i18next";
import { useMutation } from "@apollo/client/react";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

export default function TechJobClockoutDelete({ timeTicketId, completedCallback }) {
  const [deleteTimeTicket] = useMutation(DELETE_TIME_TICKET);
  const { t } = useTranslation();
  const notification = useNotification();

  const handleDelete = async () => {
    logImEXEvent("tech_clock_delete");

    const result = await deleteTimeTicket({
      variables: { id: timeTicketId },
      refetchQueries: ["QUERY_ACTIVE_TIME_TICKETS"]
    });

    if (result.errors) {
      notification.error({
        title: t("timetickets.errors.deleting", {
          message: JSON.stringify(result.errors)
        })
      });
    } else {
      notification.success({
        title: t("timetickets.successes.deleted")
      });
    }
    if (completedCallback) completedCallback();
  };

  return (
    <Popconfirm
      title={t("timetickets.labels.deleteconfirm")}
      okButtonProps={{ type: "danger" }}
      okText={t("general.actions.delete")}
      onConfirm={handleDelete}
    >
      <DeleteFilled style={{ margin: "1rem", color: "red" }} />
    </Popconfirm>
  );
}
