import React, { useEffect } from 'react'
import { createRoot } from 'react-dom/client'
import '@rainbow-me/rainbowkit/styles.css'
import {
  ConnectButton,
  getDefaultConfig,
  RainbowKitProvider,
  lightTheme
} from '@rainbow-me/rainbowkit'
import {
  rainbowWallet,
  trustWallet,
  ledgerWallet,
  rabbyWallet,
  braveWallet,
  phantomWallet,
  okxWallet,
  bitgetWallet,
  zerionWallet,
  base,
  injectedWallet,
  safeWallet,
  walletConnectWallet
} from '@rainbow-me/rainbowkit/wallets'
import { WagmiProvider, http, useAccount, useWalletClient } from 'wagmi'
import { mainnet } from 'wagmi/chains'
import { defineChain } from 'viem'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'

const PROJECT_ID = 'd284513936c9f1778e474422f04c9753'

const browserWallet = () => ({
  ...injectedWallet(),
  name: 'MetaMask / Browser Wallet'
})

const arcMainnet = defineChain({
  id: 5042,
  name: 'Arc',
  nativeCurrency: {
    decimals: 18,
    name: 'USDC',
    symbol: 'USDC'
  },
  rpcUrls: {
    default: { http: ['https://5042.rpc.thirdweb.com'] },
    public: { http: ['https://5042.rpc.thirdweb.com'] }
  }
})

const config = getDefaultConfig({
  appName: 'ARC Bridge',
  projectId: PROJECT_ID,
  wallets: [
    {
      groupName: 'Popular',
      wallets: [
        browserWallet,
        rainbowWallet,
        trustWallet,
        ledgerWallet,
        rabbyWallet,
        braveWallet,
        phantomWallet,
        okxWallet,
        bitgetWallet,
        zerionWallet,
        base,
        walletConnectWallet
      ]
    },
    {
      groupName: 'Other',
      wallets: [
        injectedWallet,
        safeWallet
      ]
    }
  ],
  chains: [mainnet, arcMainnet],
  transports: {
    [mainnet.id]: http('https://ethereum-rpc.publicnode.com'),
    [arcMainnet.id]: http('https://5042.rpc.thirdweb.com')
  },
  ssr: false
})

const queryClient = new QueryClient()

function WalletBridge() {
  const { address } = useAccount()
  const { data: walletClient } = useWalletClient()

  useEffect(() => {
    const provider = walletClient
      ? {
          request: ({ method, params }) => walletClient.request({ method, params })
        }
      : null
    const readyAddress = provider ? address : null

    window.dispatchEvent(new CustomEvent('arc-wallet-change', {
      detail: { address: readyAddress, provider }
    }))
  }, [address, walletClient])

  return null
}

createRoot(document.getElementById('walletRoot')).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider
          initialChain={mainnet}
          theme={lightTheme({
            accentColor: '#2563eb',
            accentColorForeground: 'white',
            borderRadius: 'medium',
            fontStack: 'system'
          })}
        >
          <WalletBridge />
          <div
            id="rainbowButtonProxy"
            style={{
              position: 'fixed',
              left: '-9999px',
              top: '-9999px',
              width: 1,
              height: 1,
              overflow: 'hidden'
            }}
          >
            <ConnectButton label="Connect Wallet" />
          </div>
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
)