import { useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { PaymentIntent } from '@chargebee/chargebee-js-types'
import { SubscriptionReceipts, extractErrorMessage, useApi, useApiCall } from '../../../../api'
import { usePayment, GooglePayButtonOptions } from '../../../../payment'
import { useAuth } from '../../../../auth'
import Loader from '../../../Loader'
import ErrorText from '../../../ErrorText'

const currencyCode = 'USD'
const paymentMethod = 'google_pay'

interface GooglePayButtonProps {
  onSuccess: (receipt: SubscriptionReceipts.SubscriptionReceipt) => void
  onError: (error: Error) => void
}

export function GooglePayButton({ onSuccess, onError }: GooglePayButtonProps): JSX.Element {
  const api = useApi()
  const buttonId = 'google-pay-btn'
  const { i18n } = useTranslation()
  const { token } = useAuth()
  const { googlePay } = usePayment()
  const loadData = useCallback(() => {
    return api.createPaymentIntent({ token, paymentMethod, currencyCode })
      .then(({ payment_intent }) => payment_intent)
  }, [api, token])
  const { data, error, isPending } = useApiCall<PaymentIntent>(loadData)

  if (error) console.error(error)

  useEffect(() => {
    if (data === null) return
    const buttonOptions: GooglePayButtonOptions = {
      buttonColor: 'black',
      buttonType: 'pay',
      buttonLocale: i18n.language,
      buttonSizeMode: 'fill',
    }
    googlePay?.setPaymentIntent(data)
    googlePay?.mountPaymentButton(`#${buttonId}`, buttonOptions)
      .then(() => googlePay?.handlePayment())
      .then((result) => {
        console.log('Success payment by GooglePay', result)
        // TODO: implement api.createSubscriptionReceipt for GooglePay
      })
      .then(() => onSuccess({} as SubscriptionReceipts.SubscriptionReceipt))
      .catch((error: Error) => onError(error))
  }, [data, googlePay, buttonId, i18n.language, onSuccess, onError])

  return isPending ? <Loader /> : (
    <div id={buttonId} className='pay-btn'>{
      error ? <ErrorText message={extractErrorMessage(error)} isShown={true} size='large'/> : null
    }</div>
  )
}