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

/**
 * @file stackItem.stylex.ts
 * @input Uses @stylexjs/stylex
 * @output StyleX utility for stack item styling
 * @position Layout utility; used by StackItem and directly by components
 *
 * SYNC: When modified, update /packages/core/src/Stack/Stack.doc.mjs
 */

import * as stylex from "../style-runtime.js";

/**
 * "Resets" the min-width and min-height of the flex item to behave predictably.
 *
 * Flex items have an implicit min size of auto, meaning they will never shrink
 * smaller than their contents. This reset allows items to be constrained by
 * their flex parent and become scrollable if necessary.
 */
const minSizeResetStyles = {
  reset: {
    kAzted: "x2lwn1j",
    k7Eaqz: "xeuugli",
    $$css: true as const
  }
};
const crossAlignSelfStyles = {
  center: {
    kSGwAc: "xamitd3",
    $$css: true as const
  },
  end: {
    kSGwAc: "xpvyfi4",
    $$css: true as const
  },
  start: {
    kSGwAc: "xqcrz7y",
    $$css: true as const
  },
  stretch: {
    kSGwAc: "xkh2ocl",
    $$css: true as const
  }
};

/**
 * Cross-alignment options for stack items.
 * Overrides the default cross-alignment set on the parent stack.
 */
export type StackItemCrossAlignSelf = keyof typeof crossAlignSelfStyles;
const sizeStyles = {
  fill: {
    kzQI83: "x1iyjqo2",
    $$css: true as const
  },
  static: {
    kzQI83: "x1c4vz4f",
    kmuXW: "x2lah0s",
    $$css: true as const
  }
};

/**
 * Size options for stack items.
 * - `static`: Item uses its intrinsic size, won't grow or shrink
 * - `fill`: Item grows to fill remaining space (flexGrow: 1)
 */
export type StackItemSize = keyof typeof sizeStyles;
export interface StackItemOptions {
  /**
   * Overrides the default cross-alignment for this item.
   * (hAlign for VStack, vAlign for HStack)
   *
   * Set cross-alignment on the stack itself and override individual
   * children as needed with this option.
   */
  crossAlignSelf?: StackItemCrossAlignSelf;

  /**
   * Size behavior of the item within the stack.
   * - `static`: Uses intrinsic size, won't grow or shrink (default)
   * - `fill`: Grows to fill remaining space
   *
   * @default "static"
   */
  size?: StackItemSize;
}

/**
 * StyleX utility to add stack item styles to any component.
 *
 * Use this to avoid wrapping components in StackItem when you need
 * direct control over flex behavior.
 *
 * @example
 * ```
 * import { stackItem } from '@astryxdesign/core/Layout';
 *
 * <div {...stylex.props(...stackItem({ size: 'fill' }))}>
 *   Content that fills remaining space
 * </div>
 * ```
 */
export function stackItem({
  crossAlignSelf,
  size
}: StackItemOptions = {}) {
  return [minSizeResetStyles.reset, sizeStyles[size ?? 'static'], crossAlignSelf != null && crossAlignSelfStyles[crossAlignSelf]] as const;
}