import React, { Suspense } from "react";
import { createRoot } from "react-dom/client";
import ThemeProvider from "./providers/ThemeProvider";
import { CssBaseline } from "@mui/material";
import AppRouter from "./components/AppRouter";
import { TuitioProvider } from "@flare/tuitio-client-react";
import { ToastProvider, RealtimeNotificationsProvider } from "./providers";
import env from "./utils/env";
import "./utils/i18n";

const domNode = document.getElementById("root");
if (!domNode) {
  throw new Error("Could not find root element");
}

const root = createRoot(domNode, {
  onUncaughtError: (error, errorInfo) => {
    console.error(error, errorInfo);
  },
  onCaughtError: (error, errorInfo) => {
    console.error(error, errorInfo);
  }
});

root.render(
  <TuitioProvider tuitioUrl={env.VITE_APP_TUITIO_URL}>
    <ThemeProvider>
      <CssBaseline />
      <Suspense fallback={<div>Loading...</div>}>
        <ToastProvider>
          <RealtimeNotificationsProvider>
            <AppRouter />
          </RealtimeNotificationsProvider>
        </ToastProvider>
      </Suspense>
    </ThemeProvider>
  </TuitioProvider>
);