import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { App } from './App';
import { ApiError, setActiveWorkspace } from './api/client';
import { I18nProvider } from './i18n';
import { SessionProvider } from './state/session';
import { ToastProvider, Toasts } from './state/toasts';
import { readRoute } from './state/route';
import './styles.css';

/**
 * The URL decides the workspace, once, before anything renders. Switching
 * workspaces is a navigation, so this never has to change during a page's life.
 */
const route = readRoute();
setActiveWorkspace(route.kind === 'workspace' ? route.slug : null);
const routeLocale = route.kind === 'home' ? route.locale : undefined;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      // Retrying a 401 or a 400 just delays the honest answer.
      retry: (failureCount, error) =>
        !(error instanceof ApiError && error.status >= 400 && error.status < 500) &&
        failureCount < 2,
      refetchOnWindowFocus: true,
      staleTime: 5_000,
    },
  },
});

const container = document.getElementById('root');
if (!container) throw new Error('Wellformed could not find its #root element.');

createRoot(container).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ToastProvider>
        <SessionProvider>
          <I18nProvider locale={routeLocale}>
            <App route={route} />
            <Toasts />
          </I18nProvider>
        </SessionProvider>
      </ToastProvider>
    </QueryClientProvider>
  </StrictMode>,
);