import { configureCsrfTokenReader, coreSpanish } from "@metis/core/client";
import { identityKeys } from "@metis/identity/client";
import type { SessionResponseDTO } from "@metis/identity/common";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { I18nextProvider } from "react-i18next";

import { App } from "./app";
import { createAppI18n } from "./i18n";
import "./global.css";

const rootElement = document.getElementById("root");

if (!rootElement) {
  throw new Error("Missing application root");
}
const { instance, initialization } = createAppI18n();
const queryClient = new QueryClient();

configureCsrfTokenReader(
  () => queryClient.getQueryData<SessionResponseDTO>(identityKeys.session)?.csrfToken
);

initialization
  .then(() => {
    createRoot(rootElement).render(
      <StrictMode>
        <I18nextProvider i18n={instance}>
          <QueryClientProvider client={queryClient}>
            <App />
          </QueryClientProvider>
        </I18nextProvider>
      </StrictMode>
    );
  })
  .catch(() => {
    rootElement.setAttribute("role", "alert");
    rootElement.textContent = coreSpanish.startupError;
  });