import KeycloakAdminClient from "@keycloak/keycloak-admin-client";
import {
  mainPageContentId,
  useEnvironment,
} from "@keycloakify/keycloak-admin-ui/ui-shared";
import { Page } from "@patternfly/react-core";
import { PropsWithChildren, Suspense, useEffect, useState } from "react";
import { Outlet } from "react-router-dom";

import {
  ErrorBoundaryFallback,
  ErrorBoundaryProvider,
  KeycloakSpinner,
} from "@keycloakify/keycloak-admin-ui/ui-shared";
import { Banners } from "@keycloakify/keycloak-admin-ui/Banners";
import { Header } from "@keycloakify/keycloak-admin-ui/PageHeader";
import { PageNav } from "@keycloakify/keycloak-admin-ui/PageNav";
import { AdminClientContext, initAdminClient } from "@keycloakify/keycloak-admin-ui/admin-client";
import { PageBreadCrumbs } from "@keycloakify/keycloak-admin-ui/components/bread-crumb/PageBreadCrumbs";
import { ErrorRenderer } from "@keycloakify/keycloak-admin-ui/components/error/ErrorRenderer";
import { RecentRealmsProvider } from "@keycloakify/keycloak-admin-ui/context/RecentRealms";
import { AccessContextProvider } from "@keycloakify/keycloak-admin-ui/context/access/Access";
import { RealmContextProvider } from "@keycloakify/keycloak-admin-ui/context/realm-context/RealmContext";
import { ServerInfoProvider } from "@keycloakify/keycloak-admin-ui/context/server-info/ServerInfoProvider";
import { WhoAmIContextProvider } from "@keycloakify/keycloak-admin-ui/context/whoami/WhoAmI";
import type { Environment } from "@keycloakify/keycloak-admin-ui/environment";
import { SubGroups } from "@keycloakify/keycloak-admin-ui/groups/SubGroupsContext";
import { AuthWall } from "@keycloakify/keycloak-admin-ui/root/AuthWall";

const AppContexts = ({ children }: PropsWithChildren) => (
  <ErrorBoundaryProvider>
    <ServerInfoProvider>
      <RealmContextProvider>
        <WhoAmIContextProvider>
          <RecentRealmsProvider>
            <AccessContextProvider>
              <SubGroups>{children}</SubGroups>
            </AccessContextProvider>
          </RecentRealmsProvider>
        </WhoAmIContextProvider>
      </RealmContextProvider>
    </ServerInfoProvider>
  </ErrorBoundaryProvider>
);

export const App = () => {
  const { keycloak, environment } = useEnvironment<Environment>();
  const [adminClient, setAdminClient] = useState<KeycloakAdminClient>();

  useEffect(() => {
    const init = async () => {
      const client = await initAdminClient(keycloak, environment);
      setAdminClient(client);
    };
    init().catch(console.error);
  }, []);

  if (!adminClient) return <KeycloakSpinner />;
  return (
    <AdminClientContext.Provider value={{ keycloak, adminClient }}>
      <AppContexts>
        <Banners />
        <Page
          header={<Header />}
          isManagedSidebar
          sidebar={<PageNav />}
          breadcrumb={<PageBreadCrumbs />}
          mainContainerId={mainPageContentId}
        >
          <ErrorBoundaryFallback fallback={ErrorRenderer}>
            <Suspense fallback={<KeycloakSpinner />}>
              <AuthWall>
                <Outlet />
              </AuthWall>
            </Suspense>
          </ErrorBoundaryFallback>
        </Page>
      </AppContexts>
    </AdminClientContext.Provider>
  );
};