// ~/src/siteplane/components/navigation-menu/index.ts

export * from "./navigation-menu";


// ~/src/siteplane/components/navigation-menu/navigation-menu.tsx

"use client";

import * as React from "react";
import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
import { ChevronDown } from "lucide-react";
import { SiteplaneUIPortalScope } from "../../system/provider/siteplane-ui-provider";
import { cn, type WithStringClassName } from "../../system/utils/cn";
import { slotClass } from "../../system/utils/slot-class";
import { Button } from "../button";
import "./navigation-menu.css";

// Links inside NavigationMenuContent take the panel row style without a
// hand-set `popup` flag: the content tells its links where they sit.
const NavigationMenuContentContext: React.Context<boolean> =
  React.createContext(false);

// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Base UI's own default for the item value type.
export function NavigationMenu<Value = any>(
  props: WithStringClassName<NavigationMenuPrimitive.Root.Props<Value>>,
): React.ReactElement {
  return (
    <NavigationMenuPrimitive.Root
      data-slot="navigation-menu"
      {...props}
      className={cn(slotClass("navigation-menu", props), props.className)}
    />
  );
}

export function NavigationMenuItem(
  props: WithStringClassName<NavigationMenuPrimitive.Item.Props>,
): React.ReactElement {
  return (
    <NavigationMenuPrimitive.Item
      data-slot="navigation-menu-item"
      {...props}
      className={cn(slotClass("navigation-menu-item", props), props.className)}
    />
  );
}

export function NavigationMenuList({
  className,
  ...props
}: WithStringClassName<NavigationMenuPrimitive.List.Props>): React.ReactElement {
  return (
    <NavigationMenuPrimitive.List
      data-slot="navigation-menu-list"
      className={cn(
        slotClass("navigation-menu-list", props),
        "flex items-center gap-1",
        className,
      )}
      {...props}
    />
  );
}

export function NavigationMenuTrigger({
  children,
  render,
  ...props
}: WithStringClassName<NavigationMenuPrimitive.Trigger.Props>): React.ReactElement {
  return (
    <NavigationMenuPrimitive.Trigger
      data-slot="navigation-menu-trigger"
      // The trigger is a Button. A render of the consumer's replaces the
      // element inside that Button, which keeps its styling and states; a
      // render function still receives the trigger's state.
      render={(triggerProps, triggerState) => (
        <Button
          {...triggerProps}
          variant="ghost"
          profile="navigation-link"
          render={
            typeof render === "function"
              ? (elementProps) => render(elementProps, triggerState)
              : render
          }
        />
      )}
      {...props}
      className={cn(
        slotClass("navigation-menu-trigger", props),
        props.className,
      )}
    >
      {children}
      <NavigationMenuPrimitive.Icon
        className="sp-navigation-menu-icon"
        data-slot="navigation-menu-icon"
      >
        <ChevronDown />
      </NavigationMenuPrimitive.Icon>
    </NavigationMenuPrimitive.Trigger>
  );
}

export function NavigationMenuLink({
  popup: popupProp,
  description,
  children,
  render,
  ...props
}: WithStringClassName<NavigationMenuPrimitive.Link.Props> & {
  /**
   * Row style for a link in a panel: full width and aligned to the start.
   * Defaults to true inside NavigationMenuContent and false elsewhere.
   */
  popup?: boolean;
  description?: React.ReactNode;
}): React.ReactElement {
  const inContent = React.useContext(NavigationMenuContentContext);
  const popup = popupProp ?? inContent;
  return (
    <NavigationMenuPrimitive.Link
      closeOnClick
      data-slot="navigation-menu-link"
      // The link is a Button-styled anchor. A render of the consumer's, such
      // as a router link, takes the place of the anchor inside that Button,
      // which keeps its styling and states; a render function still receives
      // the link's state.
      render={(linkProps, linkState) => (
        <Button
          // The link's props and ref are an anchor's, and the Button renders
          // that anchor; its props are typed for its default button.
          {...(linkProps as React.ComponentPropsWithRef<"button">)}
          variant="ghost"
          profile={popup ? "default" : "navigation-link"}
          align={popup ? "start" : "center"}
          width={popup ? "full" : "auto"}
          multiline={Boolean(description)}
          render={
            typeof render === "function"
              ? (elementProps) => render(elementProps, linkState)
              : (render ?? <a />)
          }
        />
      )}
      {...props}
      className={cn(slotClass("navigation-menu-link", props), props.className)}
    >
      <span className="min-w-0">
        <span
          className="sp-navigation-menu-link-title flex items-center gap-2"
          data-slot="navigation-menu-link-title"
        >
          {children}
        </span>
        {description && (
          // Beside a leading icon the description starts under the title text
          // (I7), a design-rework.css rule.
          <span
            className="sp-navigation-menu-link-description block text-sm font-normal text-muted-foreground"
            data-slot="navigation-menu-link-description"
          >
            {description}
          </span>
        )}
      </span>
    </NavigationMenuPrimitive.Link>
  );
}

export function NavigationMenuContent({
  children,
  className,
  ...props
}: WithStringClassName<NavigationMenuPrimitive.Content.Props>): React.ReactElement {
  return (
    <NavigationMenuPrimitive.Content
      data-slot="navigation-menu-content"
      className={cn(
        slotClass("navigation-menu-content", props),
        "sp-navigation-content",
        className,
      )}
      {...props}
    >
      <NavigationMenuContentContext.Provider value>
        {children}
      </NavigationMenuContentContext.Provider>
    </NavigationMenuPrimitive.Content>
  );
}

export function NavigationMenuPopup({
  anchor,
  ...props
}: WithStringClassName<NavigationMenuPrimitive.Popup.Props> & {
  anchor?: NavigationMenuPrimitive.Positioner.Props["anchor"];
}): React.ReactElement {
  return (
    <NavigationMenuPrimitive.Portal>
      <SiteplaneUIPortalScope>
        <NavigationMenuPrimitive.Positioner
          anchor={anchor}
          sideOffset={8}
          align="start"
          collisionPadding={16}
          className="sp-navigation-menu-positioner z-50"
          data-slot="navigation-menu-positioner"
        >
          <NavigationMenuPrimitive.Popup
            data-slot="navigation-menu-popup"
            {...props}
            className={cn(
              slotClass("navigation-menu-popup", props),
              props.className,
            )}
          >
            <NavigationMenuPrimitive.Viewport className="relative size-full overflow-hidden" />
          </NavigationMenuPrimitive.Popup>
        </NavigationMenuPrimitive.Positioner>
      </SiteplaneUIPortalScope>
    </NavigationMenuPrimitive.Portal>
  );
}


// ~/src/siteplane/components/navigation-menu/navigation-menu.css

@layer theme, base, components, siteplane, utilities;

@layer siteplane {
  /* Calm navigation motion. The popup fades in while it settles a few pixels
   * into place and leaves with a plain fade. Switching between groups cross-fades
   * the outgoing and incoming content, which travel a short distance in the
   * direction of the switch, while the popup resizes with the same timing. No
   * scale, no blur. */
  .sp-navigation-menu-popup {
    position: relative;
    width: var(--popup-width);
    height: var(--popup-height);
    max-width: var(--available-width);
    overflow: hidden;
    transition-property: opacity, translate, width, height;
    transition-duration: var(--motion-duration-navigation);
    transition-timing-function: var(--motion-ease-navigation);
  }
  .sp-navigation-menu-popup[data-starting-style] {
    opacity: 0;
    translate: 0 calc(-1 * var(--motion-overlay-y));
  }
  .sp-navigation-menu-popup[data-starting-style][data-side="top"] {
    translate: 0 var(--motion-overlay-y);
  }
  .sp-navigation-menu-popup[data-ending-style] {
    opacity: 0;
  }
  /* The content element carries the transitions Base UI waits for before it
   * unmounts the outgoing content. */
  .sp-navigation-content {
    max-height: var(--available-height);
    overflow-y: auto;
    transition-property: opacity, translate;
    transition-duration: var(--motion-duration-navigation);
    transition-timing-function: var(--motion-ease-navigation);
  }
  .sp-navigation-content[data-activation-direction]:is(
      [data-starting-style],
      [data-ending-style]
    ) {
    opacity: 0;
  }
  .sp-navigation-content[data-starting-style][data-activation-direction="right"],
  .sp-navigation-content[data-ending-style][data-activation-direction="left"] {
    translate: var(--motion-navigation-distance) 0;
  }
  .sp-navigation-content[data-starting-style][data-activation-direction="left"],
  .sp-navigation-content[data-ending-style][data-activation-direction="right"] {
    translate: calc(-1 * var(--motion-navigation-distance)) 0;
  }
  /* Closing the menu: the popup owns the fade. A near-1 opacity step registers a
   * transition, which keeps the content mounted until the popup has left. */
  .sp-navigation-content[data-ending-style]:not([data-activation-direction]) {
    opacity: 0.999;
  }
  .sp-navigation-menu-icon {
    display: flex;
    transition: transform var(--motion-duration-expand)
      var(--motion-ease-navigation);
  }
  .sp-navigation-menu-icon[data-popup-open] {
    transform: translateY(1px);
  }
  :where(html[data-motion-reduce="true"], [data-sp-motion="reduced"])
    .sp-navigation-menu-popup,
  :where(html[data-motion-reduce="true"], [data-sp-motion="reduced"])
    .sp-navigation-content,
  :where(html[data-motion-reduce="true"], [data-sp-motion="reduced"])
    .sp-navigation-menu-icon {
    transition-duration: 1ms;
    translate: none !important;
    transform: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-navigation-menu-popup,
    .sp-navigation-content,
    .sp-navigation-menu-icon {
      transition-duration: 1ms;
      translate: none !important;
      transform: none !important;
    }
  }
}