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

/**
 * @file TypeaheadItem.tsx
 * @input Uses React, StyleX, SearchableItem
 * @output Exports TypeaheadItem component for rendering dropdown items
 * @position Presentational component; used as default renderItem in BaseTypeahead
 *
 * SYNC: When modified, update:
 * - /packages/core/src/Typeahead/index.ts
 * - /packages/cli/assets/templates/blocks/components/Typeahead/ (showcase blocks)
 */

import React, { 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 type { SearchableItem } from "./types.js";
import type { BaseProps } from "../BaseProps.js";
import { mergeProps } from "../utils/index.js";
import { themeProps } from "../utils/themeProps.js";

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

export interface TypeaheadItemProps<T extends SearchableItem = SearchableItem> extends BaseProps<HTMLDivElement> {
  ref?: React.Ref<HTMLDivElement>;
  /**
   * The search result item.
   */
  item: T;

  /**
   * Icon or avatar to display before the label.
   */
  icon?: ReactNode;

  /**
   * Description text displayed below the label.
   */
  description?: string;

  /**
   * Whether this item is disabled.
   * @default false
   */
  isDisabled?: boolean;

  /**
   * Group label for grouping items visually.
   */
  group?: string;
}

// =============================================================================
// Styles
// =============================================================================

const styles = {
  container: {
    k1xSpc: "x78zum5",
    kGNEyG: "x6s0dn4",
    kOIVth: "x1txdalj",
    kAzted: "x2lwn1j",
    $$css: true as const
  },
  disabled: {
    kSiTet: "xbyyjgo",
    $$css: true as const
  }
};

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

/**
 * Default item component for typeahead dropdown results.
 *
 * Renders a label with optional icon and description.
 * Exported for use in custom `renderItem` implementations.
 *
 * @example
 * ```
 * <Typeahead searchSource={source} value={v} onChange={setV} label="Search" />
 * <Typeahead
 *   searchSource={source}
 *   value={v}
 *   onChange={setV}
 *   label="Search"
 *   renderItem={(item) => (
 *     <TypeaheadItem
 *       item={item}
 *       icon={<Avatar src={item.auxiliaryData.avatar} size="sm" />}
 *       description={item.auxiliaryData.role}
 *     />
 *   )}
 * />
 * ```
 */
export function TypeaheadItem<T extends SearchableItem>({
  ref,
  item,
  icon,
  description,
  isDisabled = false,
  group: _group,
  xstyle,
  className,
  style,
  ...rest
}: TypeaheadItemProps<T>) {
  // If item has a pre-rendered element, use it
  if (item.element) {
    return <>{item.element}</>;
  }
  return <div ref={ref} {...mergeProps(themeProps('typeahead-item'), stylex.props(styles.container, isDisabled && styles.disabled, xstyle), className, style)} {...rest}>
      {icon}
      <div className="x78zum5 xdt5ytf x98rzlu xeuugli">
        <span className="xcr08ib x1kq96og x1sodnla x1tgivj0 xb3r6kr xlyipyv xuxw1ft">{item.label}</span>
        {description && <span className="x141an7d x1ltkj2j xv1l7n4 xb3r6kr xlyipyv xuxw1ft">{description}</span>}
      </div>
    </div>;
}
TypeaheadItem.displayName = 'TypeaheadItem';