import { StrictMode } from "react";
import { createRoot, hydrateRoot } from "react-dom/client";
import { ChakraProvider } from "@chakra-ui/react";
import "../index.css";
import "@fontsource/plus-jakarta-sans";
import theme from "../theme";
import * as Sentry from "@sentry/react";
import { Integrations } from "@sentry/tracing";
import Fallback from "../components/Fallback";
import Navigation from "../components/Navigation";

Sentry.init({
  dsn: import.meta.env.VITE_DSN,
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: import.meta.env.VITE_SAMPLE_RATE
    ? parseFloat(import.meta.env.VITE_SAMPLE_RATE)
    : 0.1,
});

export async function render(pageContext: PageContext) {
  const { Page, pageProps } = pageContext;
  const root = document.getElementById("root") as HTMLElement;
  const reactRoot = (
    <StrictMode>
      <ChakraProvider theme={theme}>
        <div className="App">
          <Fallback>
            <Navigation {...pageContext.current_user} />
            <Page {...pageProps} />
          </Fallback>
        </div>
      </ChakraProvider>
    </StrictMode>
  );

  if (root.innerHTML === "") {
    createRoot(root).render(reactRoot);
  } else {
    hydrateRoot(root, reactRoot);
  }
}