import React, { useState, useCallback, useEffect } from 'react';
import { View, StyleSheet, ActivityIndicator, FlatList, Text } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';

import * as chatActions from '../../store/actions/chat';
import Colors from '../../constants/Colors';
import ChatListItem from '../../components/UI/ChatListItem';
import { Container, Header, Item, Input, Icon } from 'native-base';

const ChatListScreen = (props) => {

    const loggedUser = useSelector(state => state.auth.user);
    const chatList = useSelector(state => state.chat.chatList);
    const allChats = useSelector(state => state.chat.allChats);
    let allUsers = useSelector(state => state.users.allUsers);

    // remove logged user from the list
    allUsers = allUsers.filter(item => item._id !== loggedUser._id);


    const [isLoading, setIsLoading] = useState(false);
    const [isRefreshing, setIsRefreshing] = useState(false);
    const [searchText, setSearchText] = useState('');
    const [data, setData] = useState(chatList);


    const dispatch = useDispatch();

    const loadChatList = useCallback(async () => {
        setIsRefreshing(true);
        try {
            const result = await dispatch(chatActions.fetchChatList());
            await dispatch(chatActions.fetchChats());
            setData(result);
        } catch (err) {
            console.log(err)
        }
        setIsRefreshing(false);
    }, [dispatch, setIsLoading])

    const loadChats = useCallback(async () => {
        try {
            await dispatch(chatActions.fetchChats());
        } catch (err) {
            console.log(err)
        }
    }, [dispatch, setIsLoading])


    // useEffect(() => {
    //     const unsubscribe = props.navigation.addListener('focus', e => {
    //         setSearchText('');
    //         loadChatList();
    //     });
    //     return () => {
    //         unsubscribe();
    //     };
    // }, [])

    useEffect(() => {
        setIsLoading(true);
        loadChats()
        .then(() => {
            setIsLoading(false);
        });
        setIsLoading(false)
    }, [dispatch, loadChats])

    const handleSearchTextChange = (text) => {
        setSearchText(text);
        if(text !== ''){
            let filteredData = []
            let currData = allUsers;

            filteredData = currData.filter(item => {
                const lc = item.name.toLowerCase();
                text = text.toLowerCase();
                return lc.includes(text);
            });
            setData(filteredData);
        } else {
            setData(chatList);
        }
    }   


    if (isLoading) {
        return (
            <View style={styles.centered} >
                <ActivityIndicator size='large' color={Colors.primary} />
            </View>
        );
    }

    return (
        <Container>
            <Header style={{ backgroundColor: Colors.brightBlue }} searchBar rounded>
                <Item>
                    <Icon name="ios-search" />
                    <Input
                        value={searchText}
                        onChangeText={(text) => handleSearchTextChange(text)}
                        placeholder="Search" 
                    />
                    <Icon name="ios-people" />
                </Item>
            </Header>
            { data.length === 0 && (
                <View style={styles.centered}>
                    <Text>No chats !</Text>
                    <Text>Either your search does not match any user's name</Text>
                    <Text>or you have no chats.</Text>
                    <Text>Please refresh if you have new chats.</Text>
                </View>
            ) }
            <FlatList
                data={data}
                refreshing={isRefreshing}
                onRefresh={loadChatList}
                keyExtractor={(item) => item._id}
                renderItem={(user) => (
                    <ChatListItem user={user.item} />
                )}
            />
        </Container>
    );
};


export const screenOptions = {
    headerTitle: 'Chats'
}

const styles = StyleSheet.create({
    centered: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    },
})

export default ChatListScreen;