import { useState, type ReactNode } from "react";
import { View, Text } from "react-native";
import { useKeyboard } from "./useKeyboard";

export type ListProps<T> = {
  items: T[],
  renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
};
export function List<T>({ items, renderItem }: ListProps<T>) {
  const [idx, setIdx] = useState(0);

  useKeyboard((key) => {
    if (key.name == 'j') {
      setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
    } else if (key.name == 'k') {
      setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
    } else if (key.name == 'g' && key.shift) {
      setIdx(items.length - 1);
    }
  }, [items]);

  return (
    <View>
      {items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
        {renderItem({ item, isSelected: index == idx })}
      </View>)}
    </View>
  );
}