import React from "react";
import { Refine } from "@refinedev/core";
import {
  notificationProvider,
  ErrorComponent,
  ThemedLayoutV2,
} from "@refinedev/antd";
import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
import routerProvider, {
  NavigateToResource,
  UnsavedChangesNotifier,
} from "@refinedev/react-router-v6";
import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
import { useTranslation } from "react-i18next";
import resources from "generated/resources";
import { OffLayoutArea } from "components/offLayoutArea";
import { Header } from "components/layout";
import { GadminCrud as gadminDataProvider } from "@gadmin2/react-common";
import { CustomSider } from "./components/layout";
import { ColorModeContextProvider } from "components/contexts/color-mode";
import { authProvider } from "authProvider";
import { auditLogProvider } from "auditLogProvider";
import "@refinedev/antd/dist/reset.css";

const dataProvider = gadminDataProvider("http://localhost:8000");

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

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

  return (
    <BrowserRouter>
      <RefineKbarProvider>
        <ColorModeContextProvider>
          <Refine
            resources={resources}
            notificationProvider={notificationProvider}
            routerProvider={routerProvider}
            i18nProvider={i18nProvider}
            authProvider={authProvider}
            auditLogProvider={auditLogProvider(dataProvider)}
            dataProvider={{
              default: dataProvider,
            }}
            options={{
              syncWithLocation: true,
              warnWhenUnsavedChanges: true,
            }}
          >
            <Routes>
              <Route
                element={
                  <ThemedLayoutV2
                    Sider={CustomSider}
                    Title={() => null}
                    Header={Header}
                    OffLayoutArea={OffLayoutArea}
                  >
                    <Outlet />
                  </ThemedLayoutV2>
                }
              >
                <Route
                  index
                  element={
                    <NavigateToResource
                      resource={resources?.[0]?.name || "undefined"}
                    />
                  }
                />
                {resources.map((resource) => {
                  const {
                    list: List,
                    create: Create,
                    edit: Edit,
                    show: Show,
                  } = resource?.meta?.components || {};
                  return (
                    <Route key={`/${resource.name}`} path={`/${resource.name}`}>
                      <Route index element={<List />} />
                      <Route path="create" element={<Create />} />
                      <Route path="edit/:id" element={<Edit />} />
                      <Route path="show/:id" element={<Show />} />
                      <Route path="clone/:id" element={<Edit />} />
                    </Route>
                  );
                })}
                <Route path="*" element={<ErrorComponent />} />
              </Route>
            </Routes>
            <RefineKbar />
            <UnsavedChangesNotifier />
          </Refine>
        </ColorModeContextProvider>
      </RefineKbarProvider>
    </BrowserRouter>
  );
}

export default App;
