import type { WalletManagementConfig } from '@lifi/wallet-management'
import { WalletManagementProvider } from '@lifi/wallet-management'
import { type FC, type PropsWithChildren, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
import { EVMProvider } from './EVMProvider.js'
import { SDKProviders } from './SDKProviders.js'
import { SuiProvider } from './SuiProvider.js'
import { SVMProvider } from './SVMProvider.js'
import { UTXOProvider } from './UTXOProvider.js'
import { useExternalWalletProvider } from './useExternalWalletProvider.js'

export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
  return (
    <EVMProvider>
      <SVMProvider>
        <UTXOProvider>
          <SuiProvider>
            <SDKProviders />
            <WalletMenuProvider>{children}</WalletMenuProvider>
          </SuiProvider>
        </UTXOProvider>
      </SVMProvider>
    </EVMProvider>
  )
}

const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
  const { walletConfig } = useWidgetConfig()
  const { i18n } = useTranslation()
  const { internalChainTypes } = useExternalWalletProvider()

  const config: WalletManagementConfig = useMemo(() => {
    return {
      locale: i18n.resolvedLanguage as never,
      enabledChainTypes: internalChainTypes,
      ...walletConfig,
    }
  }, [i18n.resolvedLanguage, internalChainTypes, walletConfig])

  return (
    <WalletManagementProvider config={config}>
      {children}
    </WalletManagementProvider>
  )
}