import type { Stripe } from '@stripe/stripe-js'
import { loadStripe } from '@stripe/stripe-js/pure'
import { useQuery, useResult } from '@vue/apollo-composable'
import { Ref, ref } from '@vue/composition-api'
import gql from 'graphql-tag'

let stripe: Stripe
const stripeLoaded = ref(false)

function useStripeAccount () {
  const { result, loading, onResult } = useQuery(gql`
    query stripeConnectAccount {
      stripeConnectAccount
    }
  `)
  // @ts-ignore
  const stripeAccount: Ref<string> = useResult(result)
  const cbs = []

  onResult(result => {
    if (!result.loading) {
      cbs.forEach(cb => cb())
    }
  })

  async function getStripeAccount (): Promise<string> {
    return new Promise(resolve => {
      if (!loading.value) {
        resolve(stripeAccount.value)
      } else {
        cbs.push(() => resolve(stripeAccount.value))
      }
    })
  }

  return {
    getStripeAccount,
  }
}

export function useStripe () {
  const { getStripeAccount } = useStripeAccount()

  async function getStripe () {
    if (!stripe) {
      const stripeAccount = await getStripeAccount()

      stripe = await loadStripe(process.env.STRIPE_PUBLIC_KEY, {
        stripeAccount,
      })
      stripeLoaded.value = true
    }
    return stripe
  }

  return {
    getStripe,
    stripeLoaded,
  }
}