/* eslint-disable react-hooks/exhaustive-deps */
import { Center, Grid, Loader } from '@tidbcloud/uikit'
import { observer } from 'mobx-react'
import React, { useEffect, useState } from 'react'

import { HeroComponent } from 'dbaas/components/Measurement'
import CreditCards from 'dbaas/screens/Stripe/CreditCards'
import { useGetPartnerByCustomerId } from 'dbaas/services/account'
import { CentralUserProfileOrgOrgTag } from 'dbaas/services/account/interface'
import { useGetActivePaymentMethod } from 'dbaas/services/billing'
import { FormsBillingConfig } from 'dbaas/services/billing/interface'
import useStores from 'dbaas/stores/useStores'

import { WireTransferPayment, MarketplacePayment, ResellerPayment } from '../Marketplace'

export const PAYMENT_TYPES = {
  STRIPE: 'stripe',
  GCP: 'gcp',
  AWS: 'aws',
  AZURE: 'azure',
  WIRE_TRANSFER: 'wire_transfer',
  AWS_CPPO: 'aws_cppo_transfer',
  GCP_MCPO: 'gcp_mcpo_transfer',
  ALICLOOUD: 'alicloud'
} as const

const MARKET_PAYMENT_TYPES = {
  [PAYMENT_TYPES.AWS_CPPO]: 'aws-cppo'
}

export const Payments: React.FC<
  React.PropsWithChildren<{
    disabled?: boolean
    billingConfig: FormsBillingConfig
    orgTag?: CentralUserProfileOrgOrgTag
  }>
> = observer(({ disabled, billingConfig, orgTag }) => {
  const {
    store: { tenantData, thirdPartyVendor },
    actions: { fetchPaymentMethods, fetchOrgBillingInfo, fetchBillingProfile, fetchTenantPlanInfo }
  } = useStores()

  const { data, isLoading } = useGetActivePaymentMethod(tenantData.id, billingConfig.billing_config_id)
  const { data: partner } = useGetPartnerByCustomerId(tenantData.id, {
    query: {
      enabled: tenantData.org_tag === CentralUserProfileOrgOrgTag.aws_cppo_customer
    }
  })
  const [loaded, setLoaded] = useState(false)

  useEffect(() => {
    Promise.all([
      fetchPaymentMethods(tenantData.id),
      fetchBillingProfile(tenantData.id),
      fetchOrgBillingInfo(),
      fetchTenantPlanInfo()
    ]).finally(() => {
      setLoaded(true)
    })
  }, [])

  if (isLoading) {
    return (
      <Center mt={48}>
        <Loader />
      </Center>
    )
  }

  return (
    <div>
      {data?.payment_type === PAYMENT_TYPES.WIRE_TRANSFER ? (
        <WireTransferPayment />
      ) : Array.of<string>(PAYMENT_TYPES.AWS_CPPO, PAYMENT_TYPES.GCP_MCPO).includes(data?.payment_type || '') ? (
        <ResellerPayment partnerName={partner?.name || ''} payable={data?.payable} orgTag={orgTag!} />
      ) : Array.of<string>(PAYMENT_TYPES.AWS, PAYMENT_TYPES.GCP, PAYMENT_TYPES.AZURE, PAYMENT_TYPES.ALICLOOUD).includes(
          data?.payment_type || ''
        ) ? (
        <MarketplacePayment
          source={
            MARKET_PAYMENT_TYPES[data?.payment_type || ''] || (data?.payment_type as 'gcp' | 'aws') || thirdPartyVendor
          }
          payable={data?.payable}
        />
      ) : (
        <>
          <Grid gutter={24}>
            <Grid.Col span={12}>
              <CreditCards disabled={disabled} billingConfig={disabled ? billingConfig : undefined} />
            </Grid.Col>
          </Grid>
          {loaded && <HeroComponent />}
        </>
      )}
    </div>
  )
})

export default Payments