import { DeleteFilled } from "@ant-design/icons";
import { useMutation } from "@apollo/client";
import { Button, notification, Popconfirm } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { DELETE_BILL } from "../../graphql/bills.queries";
import RbacWrapper from "../rbac-wrapper/rbac-wrapper.component";

export default function BillDeleteButton({ bill }) {
  const [loading, setLoading] = useState(false);
  const { t } = useTranslation();
  const [deleteBill] = useMutation(DELETE_BILL);

  const handleDelete = async () => {
    setLoading(true);
    const result = await deleteBill({
      variables: { billId: bill.id },
      update(cache, { errors }) {
        if (errors) return;
        cache.modify({
          fields: {
            bills(existingBills, { readField }) {
              return existingBills.filter(
                (billref) => bill.id !== readField("id", billref)
              );
            },
            search_bills(existingBills, { readField }) {
              return existingBills.filter(
                (billref) => bill.id !== readField("id", billref)
              );
            },
          },
        });
      },
    });

    if (!!!result.errors) {
      notification["success"]({ message: t("bills.successes.deleted") });
    } else {
      //Check if it's an fkey violation.
      const error = JSON.stringify(result.errors);

      if (error.toLowerCase().includes("inventory_billid_fkey")) {
        notification["error"]({
          message: t("bills.errors.deleting", {
            error: t("bills.errors.existinginventoryline"),
          }),
        });
      } else {
        notification["error"]({
          message: t("bills.errors.deleting", {
            error: JSON.stringify(result.errors),
          }),
        });
      }
    }

    setLoading(false);
  };

  return (
    <RbacWrapper action="bills:delete" noauth={<></>}>
      <Popconfirm
        disabled={bill.exported}
        onConfirm={handleDelete}
        title={t("bills.labels.deleteconfirm")}
      >
        <Button
          disabled={bill.exported}
          // onClick={handleDelete}
          loading={loading}
        >
          <DeleteFilled />
        </Button>
      </Popconfirm>
    </RbacWrapper>
  );
}
