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

export default function ScoreboardRemoveButton({ scoreboardId }) {
  const { t } = useTranslation();
  const [deleteScoreboardEntry] = useMutation(DELETE_SCOREBOARD_ENTRY);
  const [loading, setLoading] = useState(false);
  const notification = useNotification();

  const handleDelete = async (e) => {
    logImEXEvent("scoreboard_remove_job");

    e.stopPropagation();
    setLoading(true);
    const result = await deleteScoreboardEntry({
      variables: { sbId: scoreboardId },
      awaitRefetchQueries: true,
      refetchQueries: ["QUERY_SCOREBOARD_PAGINATED"]
    });

    if (result.errors) {
      notification.error({
        title: t("scoreboard.errors.removing", {
          message: JSON.stringify(result.errors)
        })
      });
    } else {
      notification.success({
        title: t("scoreboard.successes.removed")
      });
    }
    setLoading(false);
  };
  return <Button onClick={handleDelete} loading={loading} icon={<DeleteFilled />} />;
}
