import {
  PaymentRequestButtonElement,
  useStripe,
} from "@stripe/react-stripe-js";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { logImEXEvent } from "../../firebase/firebase.utils";
import { setEmailOptions } from "../../redux/email/email.actions";
import { selectBodyshop } from "../../redux/user/user.selectors";
import { TemplateList } from "../../utils/TemplateConstants";

const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
});

const mapDispatchToProps = (dispatch) => ({
  setEmailOptions: (e) => dispatch(setEmailOptions(e)),
});

function Test({ bodyshop, setEmailOptions }) {
  const stripe = useStripe();

  const [paymentRequest, setPaymentRequest] = useState(null);
  useEffect(() => {
    if (stripe) {
      const pr = stripe.paymentRequest({
        country: "CA",
        displayItems: [{ label: "Deductible", amount: 1099 }],
        currency: "cad",
        total: {
          label: "Demo total",
          amount: 1099,
        },
        requestPayerName: true,
        requestPayerEmail: true,
      });

      // Check the availability of the Payment Request API.
      pr.canMakePayment().then((result) => {
        if (result) {
          setPaymentRequest(pr);
        } else {
          // var details = {
          //   total: { label: "", amount: { currency: "CAD", value: "0.00" } },
          // };
          new PaymentRequest(
            [{ supportedMethods: ["basic-card"] }],
            {}
            //  details
          ).show();
        }
      });
    }
  }, [stripe]);

  if (paymentRequest) {
    return (
      <div style={{ height: "300px" }}>
        <PaymentRequestButtonElement options={{ paymentRequest }} />
      </div>
    );
  }

  return (
    <div>
      <button
        onClick={() => {
          setEmailOptions({
            messageOptions: {
              to: ["patrickwf@gmail.com"],
              replyTo: bodyshop.email,
            },
            template: {
              name: TemplateList().parts_order.key,
              variables: {
                id: "a7c2d4e1-f519-42a9-a071-c48cf0f22979",
              },
            },
          });
        }}
      >
        send email
      </button>
      <button
        onClick={() => {
          logImEXEvent("IMEXEVENT", { somethignArThare: 5 });
        }}
      >
        Log an ImEX Event.
      </button>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Test);