import React from "react";
import { Button, notification } from "antd";
import { useTranslation } from "react-i18next";
import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
import { useMutation } from "@apollo/client";
import { setModalContext } from "../../redux/modals/modals.actions";
import { connect } from "react-redux";

const mapDispatchToProps = (dispatch) => ({
  setPaymentContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "payment" })),
});

const PaymentReexportButton = ({ payment, refetch, setPaymentContext }) => {
  const { t } = useTranslation();
  const [updatePayment, { loading }] = useMutation(UPDATE_PAYMENT);

  const handleClick = async () => {
    const paymentUpdateResponse = await updatePayment({
      variables: {
        paymentId: payment.id,
        payment: {
          exportedat: null,
        },
      },
    });

    if (!!!paymentUpdateResponse.errors) {
      notification.open({
        type: "success",
        key: "paymentsuccessexport",
        message: t("payments.successes.markreexported"),
      });

      if (refetch) refetch();

      setPaymentContext({
        actions: {
          refetch,
        },
        context: {
          ...payment,
          exportedat: null,
        },
      });
    } else {
      notification["error"]({
        message: t("payments.errors.exporting", {
          error: JSON.stringify(paymentUpdateResponse.error),
        }),
      });
    }
  };

  return (
    <Button
      onClick={handleClick}
      loading={loading}
      disabled={!payment.exportedat}
    >
      {t("payments.labels.markforreexport")}
    </Button>
  );
};

export default connect(null, mapDispatchToProps)(PaymentReexportButton);