"use client";
import "./style.css";
import { useState } from "react";
import { AuthProvider } from "react-oidc-context";
import { oidcConfig, userManager } from "muzak/config/auth";
import { Source_Sans_3, Nunito } from "next/font/google";
import AuthStatus from "muzak/components/AuthStatus";
import NavigationBar from "muzak/components/NavigationBar";
import Quota from "muzak/components/Quota";
import SessionChecker from "muzak/components/SessionChecker";
import { AnimationContext } from "muzak/contexts/AnimationContext";
import { QuotaContext } from "muzak/contexts/QuotaContext";
import { SessionContext } from "muzak/contexts/SessionContext";
import { usePathname } from "next/navigation";

const nunito = Nunito({
  subsets: ["latin"],
});

const navToggle = true; //voor dev navigatie

const pageConfig: Record<
  string,
  {
    showAuthStatus: boolean;
    showSessionChecker: boolean;
    showNav: boolean;
    showQuota: boolean;
  }
> = {
  "/nominations": {
    showAuthStatus: true,
    showSessionChecker: false,
    showQuota: true,
    showNav: navToggle,
  },
  "/mobile-voting": {
    showAuthStatus: false,
    showSessionChecker: false,
    showQuota: false,
    showNav: false,
  },
  "/lobby": {
    showAuthStatus: true,
    showSessionChecker: false,
    showQuota: true,
    showNav: navToggle,
  },
};

function LayoutContent({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();

  const config = pageConfig[pathname] ?? {
    showAuthStatus: true,
    showSessionChecker: true,
    showQuota: false,
    showNav: navToggle,
  };

  return (
    <>
      {config.showSessionChecker && <SessionChecker />}
      {config.showAuthStatus && <AuthStatus />}
      {children}
      {config.showNav && <NavigationBar />}
      {config.showQuota && <Quota />}
    </>
  );
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const [isAnimate, setIsAnimate] = useState(false);
  const [quota, setQuota] = useState<number | null>(null);
  const [sessionId, setSessionId] = useState<string | null>(null);

  const toggleAnimation = () => {
    setIsAnimate(!isAnimate);
  };

  return (
    <html lang="en" className={nunito.className}>
      <body className={`bg-game-show ${isAnimate ? "animate" : ""} h-screen`}>
        <AuthProvider {...oidcConfig}>
          <AnimationContext.Provider value={{ isAnimate, setIsAnimate }}>
            <QuotaContext.Provider value={{ quota, setQuota }}>
              <SessionContext.Provider value={{ sessionId, setSessionId }}>
                <LayoutContent children={children} />
              </SessionContext.Provider>
            </QuotaContext.Provider>
          </AnimationContext.Provider>
        </AuthProvider>
      </body>
    </html>
  );
}
