import React, { useState } from "react";
import { StyleSheet, SafeAreaView, Text, TouchableOpacity, View, Image} from "react-native";
import { useTheme } from '@react-navigation/native';
import {SearchBar} from 'react-native-elements';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import Logo from '../../resources/logo.png';



function FindFriends({navigation, route}) {
    const { colors } = useTheme();
    const [itemSearched, setItemSearched] = useState('');
    const [searchResult, setSearchResult] = useState([]);

    async function handleSearch(searchText) {
        if (searchText != "") {
            await fetch(localhost+'/social/searchResult/'+searchText, {
                method: "GET",
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Cache-Control': 'no-store, no-cache, must-revalidate, proxy-revalidate',
                    'Pragma': 'no-cache',
                    'Expires': 0
                }
            })
            .then(function(response) {
                if (response.status === 200 || response.status === 201) {
                    response.json().then(function(data) {
                        // This contains the search results with their username and profile picture
                        // It is an array of values with each json containing a username and the profile picture uri 
                        // which can be directly used in image as source
                        setSearchResult(data.search_result);
                    })
                    console.log("Find Friends: Successfully retrived search results.");
                } else {
                    console.log('issue handleSearch. Status Code: ' + response.status);
                }
            })
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
        } else {
            setSearchResult([])
        }
    }


    function handleNavToFriend(friend_username) {
        console.log(friend_username)
        navigation.navigate("FriendProfile", {
            friend: friend_username,
            username: route.params.username
        })
        // TODO - on any navigation after the first one user profile page takes time to load
    }

    return (
        <SafeAreaView style={ [styles.screen, {flexDirection:"column"}] }>
            <Text style={ [styles.title, {color: colors.text}] }>Find Friends:</Text>
            <SearchBar
                round
                lightTheme="true"
                containerStyle={{backgroundColor: colors.background, borderTopColor: "transparent", borderBottomColor: "transparent"}}
                placeholder="Look up an item here"
                value={setItemSearched}
                onChangeText={(searchText) => handleSearch(searchText)}
                onClear={(searchText) => {setItemSearched(''); handleSearch('')}}
                on
            />
            {
                searchResult.map(function(friend) {
                    return <View>
                    <TouchableOpacity onPress={()=> handleNavToFriend(friend.username)}>
                                <View style={{flexDirection: "row"}}>
                                    <View>
                                    <Text style={ [styles.subtitle, {color: colors.text}] }>{friend.first_name} {friend.last_name}</Text>
                                    <Text style={ [styles.subtitle, {color: colors.text}] }>@{friend.username}</Text>
                                    </View>
                                    {friend.profile_picture? <Image style={ styles.profileSize } defaultSource={Logo} source={{uri: friend.profile_picture}}/>: null}
                                    {/* <TouchableOpacity onPress={() => handleAddFriend(friend.username)}>
                                        <View style={{ alignItems: 'right', left: 20, bottom: 30  }}>
                                            <Icon name='plus' color="#5c5a55" size={20} marginRight="100%"/>
                                        </View>
                                    </TouchableOpacity> */}
                                </View>
                    </TouchableOpacity>
                        <View
                            style={{
                                borderBottomColor: '#c4baba',
                                borderBottomWidth: 1,
                            }}
                        />
                </View>
                })  
            }
            
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen:{
        marginTop: "20%",
        paddingLeft: "5%",
        paddingRight: "5%",
        paddingBottom: "30%",
        marginLeft: "10%",
        marginRight: "10%"
    },
    title: {
        fontSize: 25,
        fontWeight: "bold",
        marginTop: "10%",
        paddingBottom: "20%",
        textAlign:"center"
    },
    subtitle: {
        fontSize: 16,
        textAlign:"left",
        fontWeight: "bold",
        color: '#5c5a55',
        marginBottom: "2%",
        marginTop: "4%",
        marginLeft: "5%",

    },
    profilePosition: {
        paddingTop: "10%",
        marginBottom: "5%",
        alignItems: "center"
    },
    profileSize: {
        marginTop: "2%",
        marginBottom: "2%",
        marginLeft: "10%",
        aspectRatio: 1,
        width: 50,
        height: 50,
    },
    
});

export default FindFriends;