import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { ConvexProvider, ConvexReactClient } from 'convex/react';
import { PlatformProvider } from '@discord-clone/shared/src/platform';
import App from '@discord-clone/shared/src/App';
import { ThemeProvider } from '@discord-clone/shared/src/contexts/ThemeContext';
import { VoiceProvider } from '@discord-clone/shared/src/contexts/VoiceContext';
import { SearchProvider } from '@discord-clone/shared/src/contexts/SearchContext';
import webPlatform from '@discord-clone/platform-web';
import '@discord-clone/shared/src/global.css';

const convex = new ConvexReactClient(import.meta.env.VITE_CONVEX_URL);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <PlatformProvider platform={webPlatform}>
      <ThemeProvider>
        <ConvexProvider client={convex}>
          <SearchProvider>
            <VoiceProvider>
              <BrowserRouter>
                <App />
              </BrowserRouter>
            </VoiceProvider>
          </SearchProvider>
        </ConvexProvider>
      </ThemeProvider>
    </PlatformProvider>
  </React.StrictMode>,
);
