import './styles/globals.css'

import {QueryClient, QueryClientProvider} from '@tanstack/react-query'
import {PrivyProvider} from '@privy-io/react-auth'
import {WagmiProvider} from '@privy-io/wagmi'
import {createRoot} from 'react-dom/client'
import {BrowserRouter} from 'react-router-dom'

import App from './app'
import {privyWagmiConfig} from './config/privy'
import useApiUrlStore from './app/store/apiStore'

import 'react-grid-layout/css/styles.css'
import 'react-resizable/css/styles.css'
import 'react-toastify/dist/ReactToastify.css'
import {ToastContainer} from 'react-toastify'

const element = document.getElementById('root') as HTMLElement

const root = createRoot(element)
const queryClient = new QueryClient()

// Configure Privy login methods and appearance
const privyConfig = {
  appearance: {
    theme: 'light' as const,
    accentColor: '#3B82F6' as `#${string}`, // Customize this to match your app's theme
    logo: <img src="/src/assets/logo.svg" alt="logo" />,
  },
  loginMethods: ['wallet', 'email', 'google'] as Array<'wallet' | 'email' | 'google'>,
  embeddedWallets: {
    ethereum: {
      createOnLogin: 'all-users' as const
    },
    noPromptOnSignature: false
  },
}

function AppWithProviders() {
  const { privyAppId } = useApiUrlStore()

  return (
    <PrivyProvider
      appId={privyAppId}
      config={privyConfig}
    >
      <WagmiProvider config={privyWagmiConfig}>
        <BrowserRouter>
          <App />
          <ToastContainer
            position="top-right"
            autoClose={10000}
            hideProgressBar={false}
            newestOnTop={false}
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
          />
        </BrowserRouter>
      </WagmiProvider>
    </PrivyProvider>
  )
}

root.render(
  <QueryClientProvider client={queryClient}>
    <AppWithProviders />
  </QueryClientProvider>
)
