import { useLayoutEffect } from "react";
import { AppProviders } from "./providers/AppProviders";
import { AppRouter } from "./router/routes";
import { AppHeader } from "@shared/ui";
import { useLocation } from "react-router-dom";

function shouldHideHeader(pathname: string): boolean {
  return (
    /^\/(login|register|forgot-password|verify|reset-password)(\/|$)/.test(pathname) ||
    /^\/admin(\/|$)/.test(pathname)
  );
}

function isAdminRoute(pathname: string): boolean {
  return /^\/admin(\/|$)/.test(pathname);
}

function AppShell(): JSX.Element {
  const location = useLocation();
  const hideHeader = shouldHideHeader(location.pathname);

  useLayoutEffect(() => {
    document.documentElement.classList.toggle("admin-route", isAdminRoute(location.pathname));
  }, [location.pathname]);

  return (
    <>
      {hideHeader ? null : <AppHeader />}
      <AppRouter />
    </>
  );
}

export function App(): JSX.Element {
  return (
    <AppProviders>
      <AppShell />
    </AppProviders>
  );
}
