---
import env from '$lib/env';
import type Price from '$types/Price';

interface Props {
  successPageUrl: string;
  productDescription: string;
  shortDescription: string;
  totalPrice: Price;
}

const { successPageUrl, productDescription, shortDescription, totalPrice } = Astro.props;

const PAYPAL_CLIENT_ID =
  env.ENVIRONMENT === 'prod' ? env.PAYPAL_LIVE_CLIENT_ID : env.PAYPAL_SANDBOX_CLIENT_ID;
---

<paypal-buttons
  data-paypal-client-id={PAYPAL_CLIENT_ID}
  data-success-page-url={successPageUrl}
  data-product-description={productDescription}
  data-short-description={shortDescription}
  data-total-price={totalPrice}
>
  <div id="paypal-button-container"></div>
</paypal-buttons>

<script>
  import { PayPalNamespace, loadScript } from '@paypal/paypal-js';

  const backendUrl = '/api';

  class PayPalButtons extends HTMLElement {
    constructor() {
      super();

      const paypalClientId = this.getStringDataAttribute('paypalClientId');

      const paypalOptions = {
        clientId: paypalClientId,
        locale: 'en_GB',
        commit: false,
        currency: 'GBP',
        intent: 'capture',
      };

      loadScript(paypalOptions)
        .catch((err) => {
          throw new Error('Failed to load the PayPal JS SDK script. ', err);
        })
        .then((paypal) => {
          const constructButtons = paypal?.Buttons;
          if (paypal && constructButtons) {
            const successPageUrl = this.dataset['successPageUrl'] ?? '.';
            this.makePaypalButtons(constructButtons, successPageUrl).render(
              '#paypal-button-container'
            );
          }
        });
    }

    makePaypalButtons(
      constructButtons: Required<PayPalNamespace>['Buttons'],
      successPageUrl: string
    ) {
      const productDescription = this.getStringDataAttribute('productDescription');
      const shortDescription = this.getStringDataAttribute('shortDescription');
      const totalPrice = this.getStringDataAttribute('totalPrice');

      return constructButtons({
        // This function is called to set up the transaction details without actually carrying it out
        async createOrder() {
          const body = JSON.stringify({
            productDescription,
            shortDescription,
            totalPrice,
          });
          const headers = {
            'Content-Type': 'application/json',
          };

          let response;
          try {
            response = await fetch(`${backendUrl}/order`, { method: 'POST', body, headers });
          } catch (err) {
            throw new Error(`Failed to create order. ${err}`);
          }

          if (!response.ok) {
            throw new Error(`
              Failed to create order. Backend response was
              ${response.status} ${response.statusText}. ${await response.text()}
            `);
          }

          const { orderId, approvalLink } = await response.json();
          console.info(`
            Successfully created order with ID
            ${orderId}. Approval link: ${approvalLink}
          `);
          return orderId;
        },

        // This function is called after payment is confirmed
        async onApprove(data) {
          const body = JSON.stringify({
            id: data.orderID,
            isApproved: true,
          });
          const headers = {
            'Content-Type': 'application/json',
          };

          let response;
          try {
            response = await fetch(`${backendUrl}/order`, { method: 'PATCH', body, headers });
          } catch (err) {
            throw new Error(`Failed to capture order. ${err}`);
          }

          if (!response.ok) {
            throw new Error(`
              Failed to capture order. Backend response was ${response.status}
              ${response.statusText}. ${await response.text()}
            `);
          }

          const { orderId, requestStatus } = await response.json();
          console.info(`
            Successfully captured order with ID ${orderId},
            request status is ${requestStatus}.
          `);

          console.info('Redirecting to confirmation page...');
          window.location.href = successPageUrl;
        },
      });
    }

    getStringDataAttribute(key: string): string {
      const value = this.dataset[key];
      if (!value || typeof value !== 'string') {
        throw new Error(`data-${key} attribute not provided to PayPalButtons component.`);
      }
      return value;
    }
  }

  customElements.define('paypal-buttons', PayPalButtons);
</script>