import React, { useState } from 'react';
import { View, Text, TextInput, Button, TouchableOpacity } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { useTailwind } from 'tailwind-rn';
import moment from 'moment';
import Icon from 'react-native-vector-icons/FontAwesome'
import { Swit } from './Home';



function SearchScreen({ navigation }) {
    const tailwind = useTailwind();
    const [userId, setUserId] = useState('');
    
  // query is the search term entered by the user
  const [query, setQuery] = useState('');
  // userResults and switResults are the search results
  const [userResults, setUserResults] = useState([]);
  const [switResults, setSwitResults] = useState([]);

  async function search() {
    // Get the user's token
    const token = await AsyncStorage.getItem('token');
    const apiUrl = await AsyncStorage.getItem('apiEndpoint')
    const id = await AsyncStorage.getItem('userId');
    setUserId(id);

    // Fetch user search results
    const userResponse = await fetch(`${apiUrl}/api/v1/app/user/search/?q=${query}`, {
      headers: { 'Authorization': token },
    });
    const userData = await userResponse.json();
    console.warn(userData)
    setUserResults(userData);

    // Fetch swit search results
    const switResponse = await fetch(`${apiUrl}/api/v1/app/swit/search/?q=${query}`, {
      headers: { 'Authorization': token },
    });
    const switData = await switResponse.json();
    console.warn(switData)
    setSwitResults(switData);
  }

  return (
    <View >
      <TextInput value={query} onChangeText={text => setQuery(text)} />
      <Button title="Search" onPress={search} />

      <Text>User Results</Text>
      {userResults.slice(0, 2).map(user => (
        // Display user result, which includes profile picture, display name, username, and bio
        // This is a placeholder and needs to be replaced with actual components
        <Text key={user._id}>{user.username}</Text>
      ))}
      {userResults.length > 2 && <Button title="Show More" onPress={() => navigation.navigate('UserSearchResults', { query })} />}

      <Text>Swit Results</Text>
      {switResults.slice(0, 10).map(swit => (
        // Display swit result, which includes the swit content
        // This is a placeholder and needs to be replaced with actual components
        <View style={tailwind('p-4')}>
          <Swit swit={swit} navigation={navigation} userId={userId} setSwits={setSwitResults} swits={switResults}/>
        </View>
      ))}
      {switResults.length > 10 && <Button title="Show More" onPress={() => navigation.navigate('SwitSearchResults', { query })} />}
    </View>
  );
}

export default SearchScreen;