window.paypal
  .Buttons({
    style: {
        shape: "rect",
        layout: "vertical"
    },
    async createOrder() {
        try {
            let paypalCartArray = [];
            let cart = getCartContents();
            let items = await fetchPromise;
            
            for (let fullSKU in cart) {
                let paypalItem = {};
                let cartItem = cart[fullSKU];
                let item = items[cartItem.sku];
                paypalItem.name = `${item.name} ${cartItem.size}`;
                paypalItem.quantity = cartItem.quantity;
                paypalItem.sku = fullSKU;
                //paypalItem.url = urlBase + item.url; //not until we have https hosting
                //paypalItem.image_url = urlBase + item.imageURL;
                paypalItem.unit_amount = {currency_code:"USD", value:cartItem.price};
                paypalCartArray.push(paypalItem);
            }
            let shippingInfo = {
                type:"SHIPPING",
                name:{full_name:window.shippingInfo.name}, //set in cart.html script
                email_address: window.shippingInfo.email,
                address:{
                    address_line_1:window.shippingInfo.addressLine1,
                    address_line_2:window.shippingInfo.addressLine2,
                    admin_area_1:window.shippingInfo.state,
                    admin_area_2:window.shippingInfo.city,
                    postal_code:window.shippingInfo.zip,
                    country_code:"US"
                }
            };

            const response = await fetch("/paypal/orders/create", {
                    method: "POST",
                    headers: {
                    "Content-Type": "application/json"
                    },
                    // use the "body" param to optionally pass additional order information
                    // like product ids and quantities
                    body: JSON.stringify({
                        items: paypalCartArray,
                        cartTotals: getCartTotals(),
                        shippingInfo:shippingInfo
                    })
            });
                
            const orderData = await response.json();
            console.log(orderData);
            if (orderData.id) {
                return orderData.id;
            } else {
                
                const errorDetail = orderData?.details?.[0];
                const errorMessage = errorDetail ? `${errorDetail.issue} ${errorDetail.description} (${orderData.debug_id})`
                    : JSON.stringify(orderData);
                    recordOrderData(orderData.debug_id, orderData, errorMessage);
                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 fetch(`/paypal/orders/capture/${data.orderID}`, {
          method: "POST",
          headers: {
            "Content-Type": "application/json"
          },
        });

        const orderData = await response.json();
        // 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
            let errorMessage = `${errorDetail.description} (${orderData.debug_id})`;
            recordOrderData(orderData.debug_id, orderData, errorMessage);
            throw new Error(errorMessage);
        } 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`,
          );
          let invoiceID = orderData?.purchase_units?.[0]?.payments?.captures?.[0]?.invoice_id;
          recordOrderData(invoiceID, orderData); //in my cart.html script
        }
      } catch (error) {
        console.error(error);
        
        resultMessage(
          `Sorry, your transaction could not be processed...<br><br>${error}`,
        );
      }
    }
  })
  .render("#paypal-button-container");

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