import React from "react"; // Ensure React is imported
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  StyleSheet,
  StyleProp,
  ViewStyle,
  TextStyle,
  ListRenderItemInfo, // Import this type
} from "react-native";
import { ThemeType, useTheme } from "../../theme"; // Adjust import path

interface SuggestionListProps<T> {
  data: T[];
  visible: boolean;
  renderItemContent: (item: T) => React.ReactNode; // Function to render item content
  containerStyle?: StyleProp<ViewStyle>;
  itemStyle?: StyleProp<ViewStyle>;
  itemTextStyle?: StyleProp<TextStyle>; // Default text style
  listStyle?: StyleProp<ViewStyle>;
}

const SuggestionList = <T extends unknown>({
  data,
  visible,
  renderItemContent,
  containerStyle,
  itemStyle, // Style for the default wrapper
  itemTextStyle, // Style for the default text
  listStyle,
}: SuggestionListProps<T>) => {
  const { theme } = useTheme();
  const styles = suggestionStyles(theme);

  if (!visible || data.length === 0) {
    return null;
  }

  const renderListItem = ({ item }: ListRenderItemInfo<T>) => {
    const content = renderItemContent(item);
    if (React.isValidElement(content)) {
      return content;
    }

    if (content === null || content === undefined) {
        return null;
    }

    return (
      <View style={[styles.suggestionItem, itemStyle]}>
        <Text style={[styles.suggestionText, itemTextStyle]}>{String(content)}</Text>
      </View>
    );
  };

  return (
    <View style={[styles.suggestionContainer, containerStyle]}>
      <FlatList
        data={data}
        showsVerticalScrollIndicator={false}
        keyExtractor={(_, index) => index.toString()}
        renderItem={renderListItem} // Use the robust render function
        style={[styles.list, listStyle]}
        keyboardShouldPersistTaps="handled"
      />
    </View>
  );
};

const suggestionStyles = (theme: ThemeType) =>
  StyleSheet.create({
    suggestionContainer: {
      // ... (keep as before)
      position: "absolute",
      left: 0,
      right: 0,
      backgroundColor: theme.surface,
      borderColor: theme.border,
      top:"100%",
      borderWidth: 1,
      borderBottomRightRadius: 5,
      borderBottomLeftRadius: 5,
      padding: 12,
      zIndex: 10,
      maxHeight: 150,
    },
    list: {
      flexGrow: 0,
    //   padding: 12
    },
    // Default wrapper style (used if renderItemContent returns primitive)
    suggestionItem: {
      padding: 12,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: theme.border,
    },
    // Default text style (used if renderItemContent returns primitive)
    suggestionText: {
      fontSize: 14,
      color: theme.onSurface,
    },
  });

export default SuggestionList;