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.payload = 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.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'
    })
  }

  close() {
    this.parentDiv.style.display = 'none'
    this.onClose()
  }
  callback(data) {
    this.onCompleted(data)
    this.close()
  }
  init() {
    window.onmessage = (event) => {
      const data = event.data
      this.callback(data)
      // }
    }

    const ignoreitems = []

    const 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;
    }
    // window.onmessage('checkout-completed', handleEvent, false);
    // function handleEvent(e) {
    //   console.log("calls from the iframe")
    //   console.log(e.detail) // outputs: {foo: 'bar'}
    // }
    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 #24BBA1;
                                border-radius: 50%;
                                border-top: 3px solid white;
                                width: 44px;
                                height: 44px;
                                -webkit-animation: spin 2s linear infinite; /* Safari */
                                animation: spin 2s linear infinite;
                            `
    const baseuel = 'https://payment-interface.uselinqpay.com';
    const queryparams = composeUrl();
    const checkoutinterfaceurl = baseuel
    this.CheckoutIframe.src = checkoutinterfaceurl + queryparams
    // this.CheckoutIframe.src = !!this.encryptionKey
    //   ? `${checkoutinterfaceurl}?reference=${this.reference}&amount=${this.amount}&firstName=${this.firstName}&lastName=${this.lastName}&mobile=${this.mobile}&country=${this.country}&email=${this.email}&option=${this.option}&currency=${this.currency}&encryptionKey=${this.encryptionKey}&apiKey=${this.apiKey}&redirectUrl=${this.redirectUrl}`
    //   : `${checkoutinterfaceurl}?reference=${this.reference}&amount=${this.amount}&firstName=${this.firstName}&lastName=${this.lastName}&mobile=${this.mobile}&country=${this.country}&email=${this.email}&option=${this.option}&currency=${this.currency}&redirectUrl=${this.redirectUrl}`
    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
                                    `
  }
}