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";

const root = document.getElementById("root");
if (root) {
  (async () => {
    await i18n.use(initReactI18next).init({
      resources: Language,
    });

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

    const queryClient = new QueryClient();
    createRoot(root).render(
      <QueryClientProvider client={queryClient}>
        <Stores>
          <BrowserRouter>
            <QwilightView />
          </BrowserRouter>
        </Stores>
      </QueryClientProvider>,
    );
  })();
}