import { Authenticated, I18nProvider, Refine } from "@refinedev/core";
import { useTranslation } from "react-i18next";

import { RefineSnackbarProvider, useNotificationProvider } from "@refinedev/mui";

import CssBaseline from "@mui/material/CssBaseline";
import GlobalStyles from "@mui/material/GlobalStyles";
import HistoryEduIcon from '@mui/icons-material/HistoryEdu';
import routerBindings, {
  CatchAllNavigate,
  DocumentTitleHandler,
  UnsavedChangesNotifier,
} from "@refinedev/react-router";
import { BrowserRouter, Outlet, Route, Routes } from "react-router";
import authProvider from "./providers/auth-provider";
import dataProvider from "./providers/data-provider";
import { ColorModeContextProvider } from "./contexts/color-mode";
import { Login } from "./components/auth/Login";
import { Register } from "./components/auth/Register";
import { ForgotPassword } from "./components/auth/ForgotPassword";
import { UpdatePassword } from "./components/auth/UpdatePassword";

import { Header } from "./components";
import { I18nTheme } from "./components/I18nTheme";
import { HubRoutes } from "./pages/hub";
import { FirmRoutes } from "./pages/firm";

function App() {
  const { t, i18n } = useTranslation();

  const i18nProvider: I18nProvider = {
    translate: (key: string, options?: any) => t(key, options) as string,
    changeLocale: (lang: string) => i18n.changeLanguage(lang),
    getLocale: () => i18n.language,
  };

  return (
    <BrowserRouter>
      <ColorModeContextProvider>
        <CssBaseline />
        <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
        <RefineSnackbarProvider>
          <Refine
            authProvider={authProvider}
            dataProvider={dataProvider}
            i18nProvider={i18nProvider}
            notificationProvider={useNotificationProvider}
            routerProvider={routerBindings}
            options={{
              title: {
                text: "Roleplay Contracts",
                icon: <HistoryEduIcon />
              },
              syncWithLocation: true,
              warnWhenUnsavedChanges: true,
              useNewQueryKeys: true,
              disableTelemetry: true,
              reactQuery: {
                clientConfig: {
                  defaultOptions: {
                    queries: {
                      retry: (failureCount, error) => {
                        // @ts-ignore
                        if (error.statusCode >= 400 && error.statusCode <= 499) {
                          return false
                        }
                        return failureCount < 4
                      },
                    }
                  }
                }
              }
            }}
          >
            <I18nTheme>
              <Routes>
                <Route
                  element={(
                    <Authenticated key="authenticated-routes" redirectOnFail="/login" fallback={<CatchAllNavigate  to="/login"/>}>
                      <Outlet />
                    </Authenticated>
                  )}
                >
                  <Route path="hub/*" element={<HubRoutes />} />
                  <Route path="firm/*" element={<FirmRoutes />} />
                </Route>
                <Route path="*" element={<Outlet />}>
                  <Route path="login" element={<Login />} />
                  <Route path="register" element={<Register />} />
                  <Route path="forgot-password" element={<ForgotPassword />} />
                  <Route path="update-password" element={<UpdatePassword />} />
                </Route>
                <Route index element={<><Header /><h1>{t("pages.home.title")}</h1></>} />
              </Routes>
              <UnsavedChangesNotifier />
              <DocumentTitleHandler />
            </I18nTheme>
          </Refine>
        </RefineSnackbarProvider>
      </ColorModeContextProvider>
    </BrowserRouter>
  );
}

export default App;