// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

/**
 * @file SideNavSection.tsx
 * @input Uses React, StyleX
 * @output Exports SideNavSection component and SideNavSectionProps
 * @position Core implementation; used inside SideNav children
 *
 * Section grouping for navigation items with optional title and end content.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/SideNav/SideNav.doc.mjs
 * - /packages/core/src/SideNav/SideNav.test.tsx
 * - /packages/core/src/SideNav/index.ts
 * - /apps/storybook/stories/SideNav.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
 */
import React, { useId, type ReactNode } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { colorVars, spacingVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
import { mergeProps } from "../utils/index.js";
import type { BaseProps } from "../BaseProps.js";
import { useSideNavCollapse } from "./SideNavCollapseContext.js";
import { VisuallyHidden } from "../VisuallyHidden/index.js";
import { themeProps } from "../utils/themeProps.js";
// =============================================================================
// Styles
// =============================================================================

const styles = {
  root: {
    k1xSpc: "x78zum5",
    kXwgrk: "xdt5ytf",
    k8WAf4: "xu0wf1k",
    $$css: true as const
  }
};

// =============================================================================
// Types
// =============================================================================

export interface SideNavSectionProps extends BaseProps<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>;
  /**
   * Section title.
   */
  title: string;
  /**
   * Section subtitle.
   */
  subtitle?: string;
  /**
   * Section items.
   */
  children: ReactNode;
  /**
   * Right-side content in the section header.
   */
  endContent?: ReactNode;
  /**
   * Whether the section header is visually hidden.
   * The section title is still accessible to screen readers.
   * @default false
   */
  isHeaderHidden?: boolean;
}

// =============================================================================
// Component
// =============================================================================

/**
 * Section grouping for SideNav items.
 *
 * Renders a labeled group of navigation items.
 * Uses `role="group"` with `aria-labelledby` for accessibility.
 *
 * @example
 * ```
 * <SideNavSection title="Main">
 *   <SideNavItem label="Dashboard" icon={HomeIcon} isSelected />
 *   <SideNavItem label="Projects" icon={FolderIcon} />
 * </SideNavSection>
 * ```
 */
export function SideNavSection({
  ref,
  title,
  subtitle,
  children,
  endContent,
  isHeaderHidden = false,
  xstyle,
  className,
  style,
  'data-testid': testId,
  ...rest
}: SideNavSectionProps) {
  const {
    isCollapsed
  } = useSideNavCollapse();
  const id = useId();
  const titleId = `${id}-title`;
  const headerContent = <>
      <span className="x78zum5 xdt5ytf x98rzlu xeuugli">
        <span id={titleId} className="x141an7d x2mo6ok x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft">
          {title}
        </span>
        {subtitle && <span className="x141an7d x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft">{subtitle}</span>}
      </span>
      {endContent && <span className="x2lah0s x78zum5 x6s0dn4">{endContent}</span>}
    </>;
  const shouldHideHeader = isHeaderHidden || isCollapsed;
  return <div ref={ref} {...mergeProps(themeProps('side-nav-section'), stylex.props(styles.root, xstyle), className, style)} {...rest} role="group" aria-labelledby={titleId} data-testid={testId}>
      {shouldHideHeader ? <VisuallyHidden as="div">{headerContent}</VisuallyHidden> : <div className="x78zum5 x6s0dn4 x1txdalj xf314gf xu0wf1k xt0e3qv x87ps6o">{headerContent}</div>}
      <div className="x78zum5 xdt5ytf x1lsbc85">{children}</div>
    </div>;
}
SideNavSection.displayName = 'SideNavSection';