import React from "react";
import { Button, Popconfirm } from "antd";
import { DeleteFilled } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import { DELETE_PARTS_ORDER_LINE } from "../../graphql/parts-orders.queries";
import { useMutation } from "@apollo/client";

export default function PartsOrderDeleteLine({ disabled, partsLineId, partsOrderId }) {
  const { t } = useTranslation();
  const [deletePartsOrderLine] = useMutation(DELETE_PARTS_ORDER_LINE);
  return (
    <Popconfirm
      title={t("parts_orders.labels.confirmdelete")}
      disabled={disabled}
      onConfirm={async () => {
        //Delete the parts return.!

        await deletePartsOrderLine({
          variables: { partsOrderLineId: partsLineId },
          update(cache) {
            cache.modify({
              id: cache.identify({
                __typename: "parts_orders",
                id: partsOrderId
              }),
              fields: {
                parts_order_lines(cached, { readField }) {
                  return cached.filter((c) => {
                    return readField("id", c) !== partsLineId;
                  });
                }
              }
            });
          }
        });
      }}
    >
      <Button disabled={disabled}>
        <DeleteFilled />
      </Button>
    </Popconfirm>
  );
}