import React, { useEffect } from 'react';
import { useStripe } from '@stripe/react-stripe-js';
import useEngineContext from "../../../../../../../hooks/useEngineContext";
import styles from "./index.less";
var PaymentStatus = function PaymentStatus(_ref) {
  var _context$appHelper;
  var onChange = _ref.onChange;
  var stripe = useStripe();
  var context = useEngineContext();
  var _ref2 = ((_context$appHelper = context.appHelper) === null || _context$appHelper === void 0 ? void 0 : _context$appHelper.constants) || {},
    config = _ref2.config;
  useEffect(function () {
    if (!stripe) {
      return;
    }

    // Retrieve the "setup_intent_client_secret" query parameter appended to
    // your return_url by Stripe.js
    var clientSecret = new URLSearchParams(window.location.search).get('payment_intent_client_secret');

    // Retrieve the SetupIntent
    stripe.retrievePaymentIntent(clientSecret).then(function (_ref3) {
      var paymentIntent = _ref3.paymentIntent;
      // Inspect the SetupIntent `status` to indicate the status of the payment
      // to your customer.
      //
      // Some payment methods will [immediately succeed or fail][0] upon
      // confirmation, while others will first enter a `processing` state.
      //
      // [0]: https://stripe.com/docs/payments/payment-methods#payment-notification
      console.log(paymentIntent);
      switch (paymentIntent.status) {
        case 'succeeded':
          // Success! Your payment method has been saved.
          onChange('succeeded');
          break;
        case 'processing':
          // Processing payment details. We'll update you when processing is complete.
          onChange('processing');
          break;
        case 'requires_payment_method':
          // Redirect your user back to your payment page to attempt collecting
          // Failed to process payment details. Please try another payment method.
          // payment again
          onChange('requires_payment_method');
          break;
      }
    });
  }, [stripe]);
  return /*#__PURE__*/React.createElement("div", {
    className: styles['page-loading-wrap']
  }, /*#__PURE__*/React.createElement("img", {
    loading: "lazy",
    className: styles['logo'],
    src: config.static + '/static/payment-loading.svg',
    alt: ""
  }), /*#__PURE__*/React.createElement("div", {
    className: styles['title']
  }, "\u8BF7\u7A0D\u5019"));
};
export default PaymentStatus;