import { selectInputOptionItemIncludesNeedle } from '../SelectInput.utils';
import { SelectInputItem, SelectInputProps } from '../SelectInput.types';
import { SelectInputOption } from '../Option';
import { SelectInputGroupItemView } from './GroupItemView';

export interface SelectInputItemViewProps<
  T = string,
  I extends SelectInputItem<T | undefined> = SelectInputItem<T | undefined>,
> extends Required<Pick<SelectInputProps<T>, 'renderValue'>> {
  item: I;
  needle: string | null | undefined;
}

/**
 * Component that renders different types of SelectInput items:
 * options, groups, or separators.
 */
export function SelectInputItemView<T = string>({
  item,
  renderValue,
  needle,
}: SelectInputItemViewProps<T>) {
  switch (item.type) {
    case 'option': {
      if (
        item.value != null &&
        (needle == null || selectInputOptionItemIncludesNeedle(item, needle))
      ) {
        return (
          <SelectInputOption value={item.value} disabled={item.disabled}>
            {renderValue(item.value, false)}
          </SelectInputOption>
        );
      }
      break;
    }
    case 'group': {
      return <SelectInputGroupItemView item={item} renderValue={renderValue} needle={needle} />;
    }
    case 'separator': {
      if (needle == null) {
        return <hr className="np-select-input-separator-item" />;
      }
      break;
    }
  }
  return null;
}