import "@/__core/styles/index.scss";
import "@fontsource/montserrat/200.css";
import "@fontsource/montserrat/300.css";
import "@fontsource/montserrat/400.css";
import "@fontsource/montserrat/500.css";
import "@fontsource/montserrat/600.css";
import "@fontsource/montserrat/700.css";
import { Suspense, useLayoutEffect } from "react";
import { useTranslation } from "react-i18next";
import "react-loading-skeleton/dist/skeleton.css";
import { BrowserRouter } from "react-router-dom";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import "../i18n";
import {
  AppPreloaderProvider,
  MenuProvider,
  ReactQueryProvider,
} from "../providers";
import { Router } from "../router";

export const removeLngPrefix = (pathname: string) => {
  for (const lang of ["ru", "kz", "zh", "en"]) {
    if (pathname.startsWith(`/${lang}/`) || pathname === `/${lang}`) {
      return pathname.replace(`/${lang}`, "");
    }
  }
  return pathname;
};

export const App = () => {
  const {
    i18n,
    i18n: { language },
  } = useTranslation();

  useLayoutEffect(() => {
    const currentPathname = window.location.href.replace(
      window.location.origin,
      "",
    );

    const newPathname = `/${language}${removeLngPrefix(currentPathname)}`;

    if (currentPathname !== newPathname) {
      window.history.replaceState({}, "", newPathname);
    }
  }, [language, i18n]);

  return (
    <Suspense fallback={null}>
      <BrowserRouter basename={`/${language}`}>
        <AppPreloaderProvider>
          <MenuProvider>
            <ReactQueryProvider>
              <Router />
              <ToastContainer />
            </ReactQueryProvider>
          </MenuProvider>
        </AppPreloaderProvider>
      </BrowserRouter>
    </Suspense>
  );
};