"use client";
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { Dialog } from "@base-ui-components/react/dialog";
import { forwardRef, useContext, createContext, useState } from "react";
import flattenChildren from "react-keyed-flatten-children";
import { ExperimentalButton } from "./Button.js";
import { ExperimentalMegaMenu } from "./MegaMenu.js";
import { ExperimentalNavLink } from "./NavLink.js";
import { List } from "../icons/List.js";
import { useI18n } from "../i18n/useI18n.js";
import { useCSSPropsPolyfill } from "./tailwind/useCSSPropsPolyfill.js";
import { getCSSPropsAttributes } from "./tailwind/cssProps.js";
import { classNames } from "../utils/classNames.js";
import { X } from "../icons/X.js";
const ExperimentalNavbarContext = createContext(null);
const ExperimentalNavbar = forwardRef(
  ({ layout, logo, contentAfter, className, style, children, ...props }, forwardedRef) => {
    const { t } = useI18n();
    const [propsPolyfillForwardedRef, propsPolyfillAttributes] = useCSSPropsPolyfill(
      "navbar",
      { layout },
      { ref: forwardedRef }
    );
    const navBarContext = useContext(ExperimentalNavbarContext);
    const isNested = navBarContext !== null;
    const [compactMenuOpen, setCompactMenuOpen] = useState(false);
    return /* @__PURE__ */ jsx(ExperimentalNavbarContext.Provider, { value: { setCompactMenuOpen }, children: /* @__PURE__ */ jsx(
      "div",
      {
        ref: propsPolyfillForwardedRef,
        className: classNames(["gds-navbar -:h-12 -:default-layout-compact -:lg:default-layout-full", className]),
        ...getCSSPropsAttributes("navbar", { layout }, style),
        ...propsPolyfillAttributes,
        ...props,
        children: /* @__PURE__ */ jsxs("div", { className: "flex h-full items-center gap-6", children: [
          /* @__PURE__ */ jsx("div", { className: "flex-1 @prop-layout-full/navbar:hidden", children: !isNested ? /* @__PURE__ */ jsxs(Fragment, { children: [
            /* @__PURE__ */ jsx(ExperimentalButton, { variant: "naked", onClick: () => setCompactMenuOpen(true), children: /* @__PURE__ */ jsx(List, { alt: t("components.navbar.open"), size: 6 }) }),
            /* @__PURE__ */ jsx(Dialog.Root, { open: compactMenuOpen, onOpenChange: setCompactMenuOpen, children: /* @__PURE__ */ jsx(Dialog.Portal, { children: /* @__PURE__ */ jsxs(
              Dialog.Popup,
              {
                className: `
                          fixed inset-0 flex flex-col bg-space-1700 transition duration-300
                          data-[ending-style]:opacity-0
                          data-[starting-style]:opacity-0
                        `,
                children: [
                  /* @__PURE__ */ jsx("div", { className: "flex h-[var(--gds-header-height)] items-center border-b border-space-1500 px-[var(--gds-container-padding)]", children: /* @__PURE__ */ jsx(ExperimentalNavbar, { layout: "compact", logo, className: "w-full" }) }),
                  /* @__PURE__ */ jsx(
                    "div",
                    {
                      className: `
                            flex-1 overflow-y-auto overflow-x-clip
                            nested-mega-menu:prop-layout-compact
                            nested-mega-menu:[--gds-mega-menu-border-width:0px]
                            nested-mega-menu:[--gds-mega-menu-radius:0px]
                            not-in-mega-menu:nested-nav-link:w-full
                            not-in-mega-menu:nested-nav-link:[--gds-nav-link-padding-x:theme(spacing.6)]
                            not-in-mega-menu:nested-nav-link:[--gds-nav-link-padding-y:theme(spacing.4)]
                            not-in-mega-menu:nested/nav-link-highlight:nested-nav-link:hidden
                            not-in-mega-menu:nested/nav-link-ref:nested-nav-link:justify-start
                            not-in-mega-menu:last:nested-icon:nested/nav-link-ref:nested-nav-link:ms-auto
                          `,
                      children: /* @__PURE__ */ jsx(ExperimentalMegaMenu.Group, { openMultiple: false, triggerMode: "expandOnClick", children: flattenChildren(children).map((child, childIndex) => /* @__PURE__ */ jsx("div", { className: "-mt-px border-b border-space-1500", children: child }, childIndex)) })
                    }
                  )
                ]
              }
            ) }) })
          ] }) : /* @__PURE__ */ jsx(ExperimentalButton, { variant: "naked", onClick: () => navBarContext.setCompactMenuOpen(false), children: /* @__PURE__ */ jsx(X, { alt: t("components.navbar.close"), size: 6 }) }) }),
          logo ? /* @__PURE__ */ jsx("div", { className: "min-w-auto", children: logo }) : null,
          /* @__PURE__ */ jsx(
            ExperimentalNavLink.Group,
            {
              highlightOnInteraction: true,
              className: "flex items-center gap-6 @prop-layout-compact/navbar:hidden",
              children: /* @__PURE__ */ jsx(ExperimentalMegaMenu.Group, { openMultiple: false, children })
            }
          ),
          /* @__PURE__ */ jsx("div", { className: "flex min-w-auto flex-1 shrink-0 items-center justify-end", children: contentAfter ? /* @__PURE__ */ jsx("div", { children: contentAfter }) : null })
        ] })
      }
    ) });
  }
);
ExperimentalNavbar.displayName = "ExperimentalNavbar";
export {
  ExperimentalNavbar
};
