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

'use client';

/**
 * @file LayoutContent.tsx
 * @input Uses React StyleX, LayoutSlotsContext
 * @output Exports LayoutContent component and LayoutContentProps
 * @position Scrollable main content area for Layout. Wraps the primary body content
 *   with automatic scroll containment and context-aware padding.
 *
 * SYNC: When modified, update these files to stay in sync:
 * - /packages/core/src/Layout/Layout.doc.mjs
 * - /apps/storybook/stories/Layout.stories.tsx
 * - /packages/cli/assets/templates/blocks/components/Layout/ (showcase blocks)
 */
import type { AriaRole, ReactNode } from 'react';
import type { BaseProps } from "../BaseProps.js";
import { use } from 'react';
import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { spacingVars } from "../theme/tokens.stylex.js";
import { LayoutSlotsContext } from "./LayoutSlotsContext.js";
import { mergeProps } from "../utils/index.js";
import type { SpacingStep } from "../utils/types.js";
import { themeProps } from "../utils/themeProps.js";
import { paddingStyles, containerPaddingInlineVarStyles, containerPaddingBlockStartVarStyles, containerPaddingBlockEndVarStyles } from "./padding.stylex.js";
const styles = {
  content: {
    kB7OPa: "x9f619",
    kZKoxP: "x5yr21d",
    kUk6DE: "x98rzlu",
    kAzted: "x2lwn1j",
    kVQacm: "x7giv3",
    kZCmMZ: "xwjyata",
    kwRFfy: "x1peupej",
    kLKAdn: "xqty4a x1ioh5az",
    kGO01o: "xg476vw xsg11nj",
    "--container-padding-inline-start": "x408pgh",
    "--container-padding-inline-end": "xikqloz",
    "--container-padding-block-start": "xjmgx01",
    "--container-padding-block-end": "xi9ns85",
    $$css: true as const
  },
  noStart: {
    kZCmMZ: "x139j0dd",
    "--container-padding-inline-start": "xdvaxxn",
    "--container-padding-inline-end": "xqpvj4r",
    $$css: true as const
  },
  noEnd: {
    kwRFfy: "xpc6k2p",
    $$css: true as const
  },
  noHeader: {
    kLKAdn: "x81pis9",
    "--container-padding-block-start": "xzz8v79",
    $$css: true as const
  },
  noFooter: {
    kGO01o: "xon7vh3",
    "--container-padding-block-end": "x1xjq73n",
    $$css: true as const
  },
  scrollable: {
    kVQacm: "xysyzu8",
    $$css: true as const
  },
  constrainedNoPanelsStart: {
    kZCmMZ: "xhlv5e7",
    $$css: true as const
  },
  constrainedNoPanelsEnd: {
    kwRFfy: "x1ahicqp",
    $$css: true as const
  },
  constrainedSingleStartPanel: {
    kwRFfy: "xy07wb4",
    $$css: true as const
  },
  constrainedSingleEndPanel: {
    kZCmMZ: "xxjme2g",
    $$css: true as const
  },
  fullBleed: {
    kZCmMZ: "x1c1uobl",
    kwRFfy: "xyri2b",
    kLKAdn: "xexx8yu",
    kGO01o: "x18d9i69",
    "--container-padding-inline-start": "xrhngw9",
    "--container-padding-inline-end": "xjsfl84",
    "--container-padding-block-start": "x1047aw6",
    "--container-padding-block-end": "xax9j7h",
    $$css: true as const
  }
};
export interface LayoutContentProps extends BaseProps<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>;
  /**
   * Content to render inside the content area.
   */
  children?: ReactNode;

  /**
   * Internal padding of the content area using the spacing scale.
   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
   * Overrides the default padding from the layout container.
   */
  padding?: SpacingStep;

  /**
   * Enables scrollable overflow for the content area.
   * Set to false for auto-height layouts where sticky positioning
   * needs to work with parent containers.
   * @default true
   */
  isScrollable?: boolean;

  /**
   * Accessible label for the landmark.
   * Required when role is set and multiple landmarks of the same type exist.
   */
  label?: string;

  /**
   * ARIA landmark role for accessibility.
   * Use 'main' only for the primary content area of the page (not in nested layouts).
   */
  role?: AriaRole;
}

/**
 * Scrollable main content area for Layout. Wraps the primary body content
 * with automatic scroll containment and context-aware padding.
 *
 * Already provides its own padding and scroll — don't add padding or overflow
 * to children. Use `padding={0}` if you need edge-to-edge content.
 *
 * @example
 * ```
 * <LayoutContainer variant="card">
 *   <Layout
 *     header={<LayoutHeader>Title</LayoutHeader>}
 *     content={<LayoutContent>Main body content</LayoutContent>}
 *   />
 * </LayoutContainer>
 * <LayoutContainer variant="card">
 *   <Layout
 *     content={
 *       <LayoutContent padding={0}>
 *         <Table />
 *       </LayoutContent>
 *     }
 *   />
 * </LayoutContainer>
 * <LayoutContainer variant="card">
 *   <Layout
 *     content={
 *       <LayoutContent isScrollable={false}>
 *         <StickyElement />
 *       </LayoutContent>
 *     }
 *   />
 * </LayoutContainer>
 * ```
 */
export function LayoutContent({
  children,
  isScrollable = true,
  padding,
  label,
  role,
  xstyle,
  className,
  style,
  ref,
  ...props
}: LayoutContentProps) {
  const {
    hasHeader,
    hasFooter,
    hasStart,
    hasEnd
  } = use(LayoutSlotsContext);
  const isZeroPadding = padding === 0;
  return <div ref={ref} role={role} aria-label={label} {...mergeProps(themeProps('layout-content'), stylex.props(styles.content,
  // Outer padding on container edges (unless content is full bleed)
  !hasStart && !isZeroPadding && padding == null && styles.noStart, !hasEnd && !isZeroPadding && padding == null && styles.noEnd, !hasHeader && !isZeroPadding && padding == null && styles.noHeader, !hasFooter && !isZeroPadding && padding == null && styles.noFooter, isScrollable && styles.scrollable, isZeroPadding && styles.fullBleed, padding != null && paddingStyles[padding], padding != null && containerPaddingInlineVarStyles[padding], padding != null && containerPaddingBlockStartVarStyles[padding], padding != null && containerPaddingBlockEndVarStyles[padding], !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsStart, !hasStart && !hasEnd && !isZeroPadding && styles.constrainedNoPanelsEnd, hasStart && !hasEnd && !isZeroPadding && styles.constrainedSingleStartPanel, !hasStart && hasEnd && !isZeroPadding && styles.constrainedSingleEndPanel, xstyle), className, style)} {...props}>
      {children}
    </div>;
}
LayoutContent.displayName = 'LayoutContent';