var CheckoutNS = CheckoutNS || {};
CheckoutNS.PaymentCheckout = class PaymentCheckout {
    // constructor({
    //   firstName,
    //   lastName,
    //   mobile,
    //   country,
    //   email,
    //   option,
    //   currency,
    //   encryptionKey,
    //   apiKey,
    //   amount,
    //   reference,
    //   description,
    //   onCompleted,
    //   onError,
    //   onClose,
    //   redirectUrl,
    //   frequencyId,
    //   numberOfPayment
    // })
  constructor(payload) {
    // this.firstName = payload.firstName
    // this.lastName = payload.lastName
    // this.mobile = payload.mobile
    // this.country = payload.country
    // this.email = payload.email
    // this.currency = payload.currency
    // this.option = payload.option
    // this.amount = payload.amount
    // this.description = payload.description
    // this.apiKey = payload.apiKey
    // this.encryptionKey = payload.encryptionKey
    // this.reference = payload.reference
    // this.amount = payload.amount
    // this.redirectUrl = payload.redirectUrl
    // this.frequencyId = payload.frequencyId
    // this.numberOfPayment = payload.numberOfPayment
    this.payload = payload;
    this.onClose = payload.onClose;
    this.onCompleted = payload.onCompleted;
    this.onError = payload.onError;
    this.body = document?.getElementsByTagName('body')[0];
    this.parentDiv = document?.createElement('div');
    this.frameWrapper = document?.createElement('div');
    this.CheckoutIframe = document?.createElement('iframe');
    this.closeButton = document?.createElement('div');
    this.loader = document?.createElement('div');
    this.loaderWrapper = document?.createElement('div');
    this.head = document.head;
    this.CheckoutStyle = document?.createElement('style');
    this.head.appendChild(this.CheckoutStyle);
    this.CheckoutStyle.innerHTML = `@-webkit-keyframes spin {
            0% { -webkit-transform: rotate(0deg); }
            100% { -webkit-transform: rotate(360deg); }
          }
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `;
    this.CheckoutIframe.addEventListener('load', () => {
      this.loaderWrapper.style.display = 'none';
    });
    this.CheckoutIframe.addEventListener('error', () => {
      this.onError({ error: 'Failed to load iframe' });
    });
  }

  isInstagramInAppBrowserOnIOS() {
    const ua = navigator.userAgent || navigator.vendor || window.opera;
    const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
    const isInstagram = ua.includes('Instagram');
    return isIOS && isInstagram;
  }

  close() {
    this.parentDiv.style.display = 'none';
    this.onClose();
  }

  callback(data) {
    this.onCompleted(data);
    this.close();
  }

  init() {
    if (this.isInstagramInAppBrowserOnIOS()) {
      // Open the URL in a new window
      const url = this.composeUrl();
      // const baseurl = 'https://payment-interface.dev.transactpay.ai';
      const baseurl = 'https://payment-interface.transactpay.ai';
      const redirectUrl = baseurl + url;
      window.open(redirectUrl, '_blank');
      return;
    }

    window.onmessage = (event) => {
      const data = event.data;
      this.callback(data);
    };

    window.addEventListener('checkout-complete', (event) => {
      if (event.data.isSuccess === true) {
        this.close();
        this.onCompleted(event.data);
      } else {
        this.onError(event.data);
      }
    });

    this.closeButton.innerHTML = `<span id='wc-checkout-close-button' style="font-weight: 600; font-size: 14px;  display: flex; align-items: center; letter-spacing: -0.011em; color: #E00000; background-color: #DDE0E7; border-radius: 50%; justify-content: center; padding: 10px">
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.99974 5.58599L11.9497 0.635986L13.3637 2.04999L8.41374 6.99999L13.3637 11.95L11.9497 13.364L6.99974 8.41399L2.04974 13.364L0.635742 11.95L5.58574 6.99999L0.635742 2.04999L2.04974 0.635986L6.99974 5.58599Z" fill="#262B40"/>
      </svg>
      </span>`;
    this.closeButton.addEventListener('click', () => this.close());
    this.body?.appendChild(this.parentDiv);
    this.parentDiv?.appendChild(this.frameWrapper);
    this.frameWrapper?.appendChild(this.CheckoutIframe);
    this.frameWrapper?.appendChild(this.closeButton);
    this.parentDiv?.appendChild(this.loaderWrapper);
    this.loaderWrapper?.appendChild(this.loader);
    this.loaderWrapper.style.cssText = `
                        position: fixed;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
      `;
    this.loader.style.cssText = `
                                border: 3px solid #8E173E;
                                border-radius: 50%;
                                border-top: 3px solid white;
                                width: 44px;
                                height: 44px;
                                -webkit-animation: spin 2s linear infinite; /* Safari */
                                animation: spin 2s linear infinite;
                            `;

    // Setup iframe URL
    const baseurl = 'https://payment-interface.transactpay.ai';
    const queryparams = this.composeUrl();
    this.CheckoutIframe.src = baseurl + queryparams;
  
    this.CheckoutIframe.setAttribute('frame-border', 1);
    this.CheckoutIframe.setAttribute('scrolling', 0);
  
    this.CheckoutIframe.style.cssText = `
                                border: none;
                                position: relative;
                                background-color: transparent;
                                width: 100%;
                                height: 100vh;
                                overflow: hidden;
                                margin: 0 auto;
                                `;
    this.parentDiv.style.cssText = `
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                position: fixed;
                                z-index: 10000;
                                left: 0;
                                top: 0;
                                width: 100%;
                                height: 100%;
                                overflow: hidden;
                                background-color: rgba(0,0,0,0.4);
                                    `;
    this.frameWrapper.style.cssText = `
                                    background-color: transparent;
                                    position: relative;
                                    width: 100%;
                                    overflow: scroll;
                                `;
    this.closeButton.style.cssText = `
                                cursor: pointer;
                                position: absolute;
                                color: white;
                                top: 17px;
                                right: 28px;
                                font-size: x-large
                                    `;
  }

  composeUrl() {
    const _payload = this.payload;
    let stringg = '?';
    for (let x in _payload) {
      const value = _payload[x];
      if (typeof (value) === 'function') continue;
      stringg += `${x}=${value ? value : ''}&`;
    }
    return stringg;
  }
};