import { useState, useMemo } from 'react';
import { ListItem } from '../ListItem';
import { Input } from '../Input';
import { IconSearch } from '../icons';
import styles from './MenuSelect.module.scss';

export interface MenuSelectItem {
  /** Unique identifier for the item */
  value: string;
  /** Primary text displayed */
  label: string;
  /** Optional secondary text */
  subtitle?: string;
  /** Whether the item is disabled */
  disabled?: boolean;
}

export interface MenuSelectProps {
  /** Array of selectable items */
  items: MenuSelectItem[];
  /** Currently selected value */
  value?: string | null;
  /** Callback when selection changes */
  onChange?: (value: string) => void;
  /** Maximum height before scrolling (default: 240px) */
  maxHeight?: number;
  /** Enable type-to-filter input at the top of the menu */
  filterable?: boolean;
  /** Placeholder text for filter input */
  filterPlaceholder?: string;
  /** Additional CSS classes */
  className?: string;
}

export const MenuSelect = ({
  items,
  value,
  onChange,
  maxHeight = 240,
  filterable = false,
  filterPlaceholder = 'Filter items...',
  className = '',
}: MenuSelectProps) => {
  const [filterText, setFilterText] = useState('');

  const filteredItems = useMemo(() => {
    if (!filterable || !filterText.trim()) return items;
    const query = filterText.toLowerCase().trim();
    return items.filter(
      (item) =>
        item.label.toLowerCase().includes(query) ||
        (item.subtitle && item.subtitle.toLowerCase().includes(query)),
    );
  }, [items, filterText, filterable]);

  const containerClassName = [styles.container, className].filter(Boolean).join(' ');

  const handleSelect = (itemValue: string) => {
    if (onChange) {
      onChange(itemValue);
    }
  };

  return (
    <div className={containerClassName}>
      {filterable && (
        <div className={styles.filterWrapper}>
          <Input
            value={filterText}
            onChange={setFilterText}
            placeholder={filterPlaceholder}
            leadingIcon={<IconSearch size={14} />}
            clearable
            size="slim"
          />
        </div>
      )}
      <div
        className={styles.listWrapper}
        style={{ maxHeight }}
        role="listbox"
        aria-label="Select an option"
      >
        {filteredItems.length > 0 ? (
          filteredItems.map((item) => (
            <ListItem
              key={item.value}
              title={item.label}
              subtitle={item.subtitle}
              selected={value === item.value}
              disabled={item.disabled}
              onClick={() => !item.disabled && handleSelect(item.value)}
            />
          ))
        ) : (
          <div className={styles.noResults}>No results found</div>
        )}
      </div>
    </div>
  );
};