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

/**
 * @file stack.stylex.ts
 * @input Uses @stylexjs/stylex, spacing from theme
 * @output StyleX utility for stack (flex container) styling
 * @position Layout utility; used by HStack, VStack components
 *
 * SYNC: When modified, update /packages/core/src/Stack/Stack.doc.mjs
 */

import * as stylex from "../style-runtime.js";
import "../theme/tokens.stylex.js";
import { spacingVars } from "../theme/tokens.stylex.js";
import type { SpacingStep } from "../utils/types.js";
const alignItemsStyles = {
  center: {
    kGNEyG: "x6s0dn4",
    $$css: true as const
  },
  end: {
    kGNEyG: "xuk3077",
    $$css: true as const
  },
  start: {
    kGNEyG: "x1cy8zhl",
    $$css: true as const
  },
  stretch: {
    kGNEyG: "x1qjc9v5",
    $$css: true as const
  }
};

/**
 * Cross-axis alignment options for stack items.
 * - For HStack: vertical alignment
 * - For VStack: horizontal alignment
 */
export type StackCrossAlignment = keyof typeof alignItemsStyles;
const justifyContentStyles = {
  start: {
    kjj79g: "x1nhvcw1",
    $$css: true as const
  },
  center: {
    kjj79g: "xl56j7k",
    $$css: true as const
  },
  end: {
    kjj79g: "x13a6bvl",
    $$css: true as const
  },
  between: {
    kjj79g: "x1qughib",
    $$css: true as const
  },
  around: {
    kjj79g: "x1l1ennw",
    $$css: true as const
  },
  evenly: {
    kjj79g: "xaw8158",
    $$css: true as const
  }
};

/**
 * Main-axis alignment options for stack items.
 * - For HStack: horizontal alignment
 * - For VStack: vertical alignment
 */
export type StackMainAlignment = keyof typeof justifyContentStyles;
const directionStyles = {
  horizontal: {
    kXwgrk: "x1q0g3np",
    $$css: true as const
  },
  vertical: {
    kXwgrk: "xdt5ytf",
    $$css: true as const
  }
};

/**
 * Stack direction.
 * - `horizontal`: Items flow left-to-right (HStack)
 * - `vertical`: Items flow top-to-bottom (VStack)
 */
export type StackDirection = keyof typeof directionStyles;
const wrapStyles = {
  nowrap: {
    kwnvtZ: "xozqiw3",
    $$css: true as const
  },
  wrap: {
    kwnvtZ: "x1a02dak",
    $$css: true as const
  },
  "wrap-reverse": {
    kwnvtZ: "x8hhl5t",
    $$css: true as const
  }
};

/**
 * Flex wrap behavior.
 * - `nowrap`: Items stay on one line (default)
 * - `wrap`: Items wrap to next line
 * - `wrap-reverse`: Items wrap to previous line
 */
export type StackWrap = keyof typeof wrapStyles;
const baseStyles = {
  stack: {
    k1xSpc: "x78zum5",
    $$css: true as const
  }
};

/**
 * Gap styles using spacing tokens from the theme.
 * Keys are numeric SpacingStep values.
 */
const gapStyles = {
  "0": {
    k1C7PZ: "x1o57wo1",
    khm7nJ: "x6yxi7o",
    $$css: true as const
  },
  "1": {
    k1C7PZ: "x1lfs0n9",
    khm7nJ: "x1ngg2t4",
    $$css: true as const
  },
  "2": {
    k1C7PZ: "xak3so",
    khm7nJ: "x1x7z4sm",
    $$css: true as const
  },
  "3": {
    k1C7PZ: "xewh9hi",
    khm7nJ: "x4olc9o",
    $$css: true as const
  },
  "4": {
    k1C7PZ: "xty4p9g",
    khm7nJ: "xtx9w7w",
    $$css: true as const
  },
  "5": {
    k1C7PZ: "x1eqhezk",
    khm7nJ: "x1iu6piu",
    $$css: true as const
  },
  "6": {
    k1C7PZ: "x3qlgwd",
    khm7nJ: "xczp1bk",
    $$css: true as const
  },
  "8": {
    k1C7PZ: "xicv188",
    khm7nJ: "xgx0vcf",
    $$css: true as const
  },
  "10": {
    k1C7PZ: "x1p37tyl",
    khm7nJ: "x1xpicb7",
    $$css: true as const
  },
  "0.5": {
    k1C7PZ: "x1kihgfc",
    khm7nJ: "x1tw44j4",
    $$css: true as const
  },
  "1.5": {
    k1C7PZ: "x1thn6ci",
    khm7nJ: "xhq53yo",
    $$css: true as const
  }
};
export { type SpacingStep };
export interface StackOptions {
  /**
   * Position of items along the cross-axis.
   * - For HStack: vertical alignment
   * - For VStack: horizontal alignment
   */
  crossAlign?: StackCrossAlignment;

  /**
   * Direction of the stack.
   */
  direction: StackDirection;

  /**
   * Spacing between items.
   * Accepts numeric spacing steps: 0, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 8, 10.
   */
  gap?: SpacingStep;

  /**
   * Position of items along the main-axis.
   * - For HStack: horizontal alignment
   * - For VStack: vertical alignment
   */
  mainAlign?: StackMainAlignment;

  /**
   * Whether items should wrap to the next line.
   * - `nowrap`: Items stay on one line (default)
   * - `wrap`: Items wrap to next line
   * - `wrap-reverse`: Items wrap to previous line
   * @default 'nowrap'
   */
  wrap?: StackWrap;
}

/**
 * StyleX utility to add stack (flex container) styles to any element.
 *
 * @example
 * ```
 * import { stack } from '@astryxdesign/core/Layout';
 * import * as stylex from '@stylexjs/stylex';
 *
 * // Horizontal stack with numeric gap
 * <div {...stylex.props(...stack({ direction: 'horizontal', gap: 2 }))}>
 *   <Child />
 *   <Child />
 * </div>
 *
 * // Vertical stack with centered items
 * <div {...stylex.props(...stack({ direction: 'vertical', crossAlign: 'center' }))}>
 *   <Child />
 *   <Child />
 * </div>
 *
 * // Wrapping horizontal stack with larger gap
 * <div {...stylex.props(...stack({ direction: 'horizontal', gap: 4, wrap: 'wrap' }))}>
 *   <Child />
 *   <Child />
 *   <Child />
 * </div>
 * ```
 */
export function stack({
  crossAlign,
  direction,
  gap,
  mainAlign,
  wrap
}: StackOptions) {
  return [baseStyles.stack, directionStyles[direction], gap != null && gapStyles[gap], crossAlign != null && alignItemsStyles[crossAlign], mainAlign != null && justifyContentStyles[mainAlign], wrap != null && wrapStyles[wrap]] as const;
}