import { TouchableOpacity, Text, Image, FlatList } from 'react-native';
import { AvatarWithInitials } from 'src/components';
import { API_HOST } from 'src/constants';
import { Colors } from 'src/theme';

const MentionsList = ({
  mentionList,
  inputHeight,
  onMentionSelect
}: {
  mentionList: any[];
  inputHeight: number;
  onMentionSelect: (item: any) => void;
}) => (
  <FlatList
    data={mentionList}
    keyExtractor={(item) => item.uid?.toString()}
    keyboardShouldPersistTaps="always"
    style={{
      position: 'absolute',
      bottom: inputHeight,
      backgroundColor: 'white',
      width: '100%',
      borderWidth: 1,
      borderColor: '#ccc',
      zIndex: 100,
      maxHeight: 200
    }}
    renderItem={({ item }) => (
      <TouchableOpacity
        onPress={() => onMentionSelect(item)}
        style={{
          paddingVertical: 8,
          paddingHorizontal: 10,
          borderBottomWidth: 1,
          borderColor: Colors.BORDER_LIGHT,
          flexDirection: 'row',
          alignItems: 'center',
          gap: 4
        }}
      >
        {item.avatar ? (
          <Image
            source={{ uri: API_HOST + item.avatar }}
            style={{
              width: 28,
              height: 28,
              borderWidth: 1,
              borderColor: Colors.BORDER_LIGHT,
              borderRadius: 14
            }}
          />
        ) : (
          <AvatarWithInitials
            text={item.name?.split(' ')[0][0] + (item.name?.split(' ')[1][0] ?? '')}
            flag={API_HOST + item.homebase_flag}
            size={28}
            fontSize={12}
            borderColor={Colors.BORDER_LIGHT}
            borderWidth={1}
          />
        )}
        <Text style={{ color: Colors.DARK_BLUE, fontWeight: '500' }}>@{item.name}</Text>
      </TouchableOpacity>
    )}
  />
);

export default MentionsList;
