import { loadScript } from "@paypal/paypal-js";
import { payPalOrders, payPalCapture } from '@/service/api/payment';
import { useAppStore } from '@/store/modules/app';

const appStore = useAppStore();
const locale = appStore.locale.includes("zh") ? "zh_CN" : "en_US"

export const constructPaypalBtn = async(orderId: number, currency: string) =>{
 loadScript({ clientId: import.meta.env.VITE_PAYPAL_CLIENT_ID, currency, locale: locale })
    .then((paypal: any) => {
        paypal
            .Buttons({
              style: {
                shape: "rect",
                layout: "vertical",
                color: "white",
                label: "paypal",
              },
              message: {

              },

              async createOrder() {         
                try {
                  const response = await payPalOrders({orderId: orderId});

                  const orderData = response.data;
                  if (orderData.id) {
                    return orderData.id;
                  }
                  const errorDetail = orderData?.details?.[0];
                  const errorMessage = errorDetail
                    ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                    : JSON.stringify(orderData);

                  throw new Error(errorMessage);
                } catch (error) {
                  console.error(error);
                  // resultMessage(`Could not initiate PayPal Checkout...<br><br>${error}`);
                }
              },

              async onApprove(data, actions) {
                try {
                  const response = await payPalCapture(data.orderID, orderId)

                  const orderData = response.data
                  // Three cases to handle:
                  //   (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                  //   (2) Other non-recoverable errors -> Show a failure message
                  //   (3) Successful transaction -> Show confirmation or thank you message

                  const errorDetail = orderData?.details?.[0];

                  if (errorDetail?.issue === "INSTRUMENT_DECLINED") {
                    // (1) Recoverable INSTRUMENT_DECLINED -> call actions.restart()
                    // recoverable state, per
                    // https://developer.paypal.com/docs/checkout/standard/customize/handle-funding-failures/
                    return actions.restart();
                  } else if (errorDetail) {
                    // (2) Other non-recoverable errors -> Show a failure message
                    throw new Error(`${errorDetail.description} (${orderData.debug_id})`);
                  } else if (!orderData.purchase_units) {
                    throw new Error(JSON.stringify(orderData));
                  } else {
                    // (3) Successful transaction -> Show confirmation or thank you message
                    // Or go to another URL:  actions.redirect('thank_you.html');
                    const transaction =
                      orderData?.purchase_units?.[0]?.payments?.captures?.[0] ||
                      orderData?.purchase_units?.[0]?.payments?.authorizations?.[0];
                    // resultMessage(
                    //  `Transaction ${transaction.status}: ${transaction.id}<br>
                    //<br>See console for all available details`
                    //);
                    console.log(
                      "Capture result",
                      orderData,
                      JSON.stringify(orderData, null, 2)
                    );
                    location.reload(); 

                  }
                } catch (error) {
                  console.error(error);
                  // resultMessage(
                  // `Sorry, your transaction could not be processed...<br><br>${error}`
                  //);
                }
              },
            })
            .render("#paypal-buttons")
            .catch((error) => {
                console.error("failed to render the PayPal Buttons", error);
            });
    })
    .catch((error) => {
        console.error("failed to load the PayPal JS SDK script", error);
    });
 }

// Example function to show a result to the user. Your site's UI library can be used instead.
function resultMessage(message: any) {
  const container: any = document.querySelector("#result-message");
  container.innerHTML = message;
}