import { useMutation } from "@apollo/client/react";
import { Button } from "antd";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { UPDATE_PAYMENT } from "../../graphql/payments.queries";
import { setModalContext } from "../../redux/modals/modals.actions";
import { selectPayment } from "../../redux/modals/modals.selectors";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapStateToProps = createStructuredSelector({
  paymentModal: selectPayment
});

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

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

  const handleClick = async () => {
    const paymentUpdateResponse = await updatePayment({
      variables: {
        paymentId: payment.id,
        payment: {
          exportedat: null
        }
      }
    });
    if (!paymentUpdateResponse.errors) {
      notification.success({
        key: "paymentsuccessexport",
        title: t("payments.successes.markreexported")
      });
      setPaymentContext({
        actions: {
          refetch
        },
        context: {
          ...paymentModal.context,
          ...paymentModal.context,
          ...payment,
          exportedat: null
        }
      });

      if (refetch) {
        if (paymentModal.context.refetchRequiresContext) {
          refetch(paymentUpdateResponse && paymentUpdateResponse.data.update_payments.returning[0]);
        } else {
          refetch();
        }
      }
    } else {
      notification.error({
        title: 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(mapStateToProps, mapDispatchToProps)(PaymentReexportButton);
