import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import { initReactI18next } from "react-i18next";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import i18n from "i18next";
import { getLanguage } from "taehui-ts/language";

import Language from "src/Language.json";
import { Stores } from "src/Stores";
import QwilightView from "src/qwilight/QwilightView";

import "bootstrap/dist/css/bootstrap.min.css";
import "react-contexify/dist/ReactContexify.css";
import "react-toastify/dist/ReactToastify.css";
import "src/index.scss";

(async () => {
  await i18n.use(initReactI18next).init({
    resources: Language,
  });

  const language = getLanguage();
  await i18n.changeLanguage(language);

  const queryClient = new QueryClient();

  const root = document.getElementById("root");
  if (root) {
    createRoot(root).render(
      <QueryClientProvider client={queryClient}>
        <Stores>
          <BrowserRouter>
            <QwilightView />
          </BrowserRouter>
        </Stores>
      </QueryClientProvider>,
    );
  }
})();