import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SearchBar } from '../../../components';
import CategoryItem from '../../../components/budget/categoryItem';
import useFetch from '../../../hooks/useFetch';
import { useThemeColor } from '../../../hooks/useThemeColor';

export default function Page() {

    const containerColor = useThemeColor("containerColor");
    const textColor = useThemeColor("primaryText");

    const {data, isLoading, reFetch} = useFetch({sql: "SELECT guid as category_guid, name as category_name, color as category_color FROM category", args: []});

    return (
        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
            <View>
                <Text style={[{color: textColor}]}>Expense View</Text>
                <SearchBar placeholder='Search...'></SearchBar>
            </View>
            
            <FlatList 
            data={data} 
            renderItem = {({item}) => <CategoryItem category={item.category_name} allocated_account={100} color={item.category_color}/>}
            keyExtractor={item => item.category_guid}
            ItemSeparatorComponent={() => {
                return (<View style={styles.itemSeperatorStyle}/>);
            }}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaViewStyle: {
        flex: 1,
    },
    itemSeperatorStyle: {
        marginVertical: 5,
    }
});