import React, { useEffect } from "react";
import { Searchbar } from 'react-native-paper';
import { View, ActivityIndicator, StyleSheet, SafeAreaView, FlatList } from 'react-native';
import API from "../API";
import UserName from "../components/UserName";
import GroupCard from "../components/GroupCard";
import ProfileSmallHeader from '../components/ProfileSmallHeader.js'

const Groups = () => {
    const [searchQuery, setSearchQuery] = React.useState('');
    const [groups, setGroups] = React.useState([]);
    const [queryTimer, setQueryTimer] = React.useState(0);

    useEffect(() => {
        API.getRecentGroups('').then((data) => {
            setGroups(data.groups || []);
        });
    }, [])



    const onChangeSearch = query => {
        setSearchQuery(query);
        if (queryTimer) clearTimeout(queryTimer);
        let timerId = setTimeout(() => {
            if (!query) {
                return API.getRecentGroups('').then((data) => {
                    setGroups(data.groups || []);
                });
            }
            API.searchGroups(query).then((data) => {
                setGroups(data.groups || []);
            })

        }, 300);
        setQueryTimer(timerId);
    };
    const renderProfile = (({ item }) => {
        return (<GroupCard profileObj={item} />);
    });
    return (
        <SafeAreaView>
            <Searchbar
                placeholder="Search Groups"
                onChangeText={onChangeSearch}
                value={searchQuery}
            />
            <FlatList
                contentContainerStyle={styles.container}
                numColumns={2}
                columnWrapperStyle={{justifyContent: "space-evenly"}}
                data={groups}
                renderItem={renderProfile}
                keyExtractor={item => item._id}
            />
        </SafeAreaView>
    )
}

export default Groups;

const styles = StyleSheet.create({
    container: {
        padding: 5,
    },
});