import { jsxs, jsx } from "react/jsx-runtime";
import { useRef, useState, useCallback, useEffect } from "react";
/* empty css                                                                                                                                                                                       */
/* empty css                                                                                                                                                                                        */
/* empty css                                                                                                                                                                                                */
/* empty css                                                                                                                                                                                           */
/* empty css                                                                                                                                                                                           */
import { AppShellBody } from "./container/AppShellBody.mjs";
import { AppShellMain } from "./container/AppShellMain.mjs";
import { AppShellRoot } from "./container/AppShellRoot.mjs";
import { NavMenuRefContext } from "./navbar/context/nav-menu-ref-context.mjs";
import { ExpandNavbarButton } from "./navbar/ExpandNavbarButton.mjs";
import { Navbar } from "./navbar/Navbar.mjs";
import { NavbarHeader } from "./navbar/NavbarHeader.mjs";
import { NavbarSection } from "./navbar/NavbarSection.mjs";
import { Box } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/core/Box/Box.mjs";
import { Stack } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Stack/Stack.mjs";
import { Divider } from "../../node_modules/.pnpm/@mantine_core@7.15.2_patch_hash_jclkxeaefn6uz54h34k3r3yjsq_@mantine_hooks@7.15.2_react@18.3.1_szqfuioo5damkjdixckhzmwycq/node_modules/@mantine/core/esm/components/Divider/Divider.mjs";
const DEFAULT_NAVBAR_WIDTH = 240;
const AppShell = ({ banner, navbar, children }) => {
  const navMenuRef = useRef(null);
  const bannerRef = useRef(null);
  const [withBanner, setWithBanner] = useState(false);
  const [navbarCollapsed, setNavbarCollapsed] = useState(false);
  const navbarWidth = navbar.width ?? DEFAULT_NAVBAR_WIDTH;
  const toggleNavbar = useCallback(() => {
    setNavbarCollapsed((prev) => !prev);
  }, []);
  useEffect(() => {
    var _a;
    if (bannerRef.current) {
      setWithBanner(((_a = bannerRef.current.children) == null ? void 0 : _a.length) > 0);
    }
  }, [banner]);
  return /* @__PURE__ */ jsxs(AppShellRoot, { children: [
    /* @__PURE__ */ jsx(Box, { ref: bannerRef, children: banner }),
    /* @__PURE__ */ jsxs(
      AppShellMain,
      {
        mod: withBanner ? ["height-flex"] : void 0,
        style: {
          "--app-shell-transition-duration": "200ms",
          "--app-shell-transition-timing-function": "ease",
          "--app-shell-navbar-width": `${navbarWidth}px`,
          "--app-shell-navbar-offset": navbarCollapsed ? "0px" : `${navbarWidth}px`,
          "--app-shell-navbar-collapsed": navbarCollapsed ? "1" : "0"
        },
        children: [
          navbarCollapsed && /* @__PURE__ */ jsx(ExpandNavbarButton, { onClick: toggleNavbar }),
          /* @__PURE__ */ jsxs(Navbar, { withBorder: true, hidden: navbarCollapsed, children: [
            /* @__PURE__ */ jsx(NavbarSection, { children: /* @__PURE__ */ jsx(
              NavbarHeader,
              {
                logo: navbar.logo,
                onLogoClick: navbar.onLogoClick,
                onToggleCollapse: toggleNavbar,
                px: "md",
                py: 8
              }
            ) }),
            /* @__PURE__ */ jsx(NavbarSection, { children: /* @__PURE__ */ jsx(Box, { px: "md", children: navbar.resourceShortcut }) }),
            /* @__PURE__ */ jsx(NavbarSection, { grow: true, scrollable: true, py: 8, children: /* @__PURE__ */ jsx(Stack, { ref: navMenuRef, gap: 8, px: "md" }) }),
            /* @__PURE__ */ jsxs(NavbarSection, { px: "md", py: "8", children: [
              /* @__PURE__ */ jsx(Divider, { mx: "-md", mb: 8 }),
              /* @__PURE__ */ jsx(Stack, { gap: 8, children: navbar.footer })
            ] })
          ] }),
          /* @__PURE__ */ jsx(AppShellBody, { children: /* @__PURE__ */ jsx(NavMenuRefContext.Provider, { value: navMenuRef, children }) })
        ]
      }
    )
  ] });
};
export {
  AppShell
};
