import type { CSSProperties, ReactElement } from 'react';
import { VariantType } from '../../types/search';
import { EmbeddedSearch } from './EmbeddedSearch';
import { ExactSearch } from './ExactSearch';
import { MiniSearch } from './MiniSearch';
import { StandardSearch } from './StandardSearch';
import type { ExactSearchResult } from './ExactSearch';
import type { MiniSearchResult } from './MiniSearch';
import type { StandardSearchResult } from './StandardSearch';
import type { SearchResultItemComponent } from './shared/renderSearchResultItem';

export interface SearchProps {
  /** Search variant. Defaults to STANDARD. */
  variant?: VariantType;
  /** Debounce delay in milliseconds (passed to Mini/Standard/Embedded). */
  debounceTime?: number;
  /** Auto-focus the input on mount. */
  autoFocus?: boolean;
  /**
   * When true, GROUP search results are filtered to only show groups the
   * current user has joined. Passed to Mini/Standard.
   */
  enableLocalSearch?: boolean;
  /**
   * Custom result-row renderer. Receives `{ keyword, data, type }` the same
   * way the legacy Search `SearchResultItem` slot did.
   */
  SearchResultItem?: SearchResultItemComponent | undefined;
  className?: string;
  style?: CSSProperties;
  /** Called on every keyword change. */
  onKeywordChange?: (keyword: string) => void;
  /** Called when a result row is clicked. */
  onResultItemClick?: (
    result: ExactSearchResult | MiniSearchResult | StandardSearchResult,
  ) => void;
}

/**
 * Unified Search entry — dispatches to ExactSearch / EmbeddedSearch /
 * MiniSearch / StandardSearch based on the `variant` prop.
 *
 * This mirrors the Vue3 `Search.vue` router component so that demo/consumer
 * code can keep using `<Search variant={...} />` without touching each
 * sub-component directly.
 */
export function Search({
  variant = VariantType.MINI,
  debounceTime,
  autoFocus = false,
  enableLocalSearch = false,
  SearchResultItem,
  className,
  style,
  onKeywordChange,
  onResultItemClick,
}: SearchProps): ReactElement | null {
  const itemSlot = SearchResultItem !== undefined ? { SearchResultItem } : {};
  switch (variant) {
    case VariantType.EXACT:
      return (
        <ExactSearch
          autoFocus={autoFocus}
          {...itemSlot}
          {...(className !== undefined && { className })}
          {...(style !== undefined && { style })}
          {...(onKeywordChange !== undefined && { onKeywordChange })}
          {...(onResultItemClick !== undefined && { onResultItemClick })}
        />
      );
    case VariantType.EMBEDDED:
      return (
        <EmbeddedSearch
          {...(debounceTime !== undefined && { debounceTime })}
          autoFocus={autoFocus}
          {...itemSlot}
          {...(className !== undefined && { className })}
          {...(style !== undefined && { style })}
        />
      );
    case VariantType.MINI:
      return (
        <MiniSearch
          {...(debounceTime !== undefined && { debounceTime })}
          autoFocus={autoFocus}
          enableLocalSearch={enableLocalSearch}
          {...itemSlot}
          {...(className !== undefined && { className })}
          {...(style !== undefined && { style })}
          {...(onKeywordChange !== undefined && { onKeywordChange })}
          {...(onResultItemClick !== undefined && { onResultItemClick })}
        />
      );
    case VariantType.STANDARD:
    default:
      return (
        <StandardSearch
          {...(debounceTime !== undefined && { debounceTime })}
          enableLocalSearch={enableLocalSearch}
          {...itemSlot}
          {...(className !== undefined && { className })}
          {...(style !== undefined && { style })}
          {...(onKeywordChange !== undefined && { onKeywordChange })}
          {...(onResultItemClick !== undefined && { onResultItemClick })}
        />
      );
  }
}