import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useTheme } from '../../app/contexts/ThemeContext';
import useFetch from '../../hooks/useFetch';

const BudgetOverview = () => {
    const { colors } = useTheme();
    const [spent, setSpent] = useState(0);
    const [budget, setBudget] = useState(0);

    const spentQuery = {
        sql: "SELECT SUM(e.amount) as total FROM expense e LEFT JOIN category c ON e.category_guid = c.guid WHERE c.type = 'budget'",
        args: []
    };    

    const budgetQuery = {
        sql: "SELECT SUM(allocated_amount) as total FROM category WHERE type = 'budget'",
        args: []
    };

    const { data: spentData, isLoading: spentLoading } = useFetch(spentQuery);
    const { data: budgetData, isLoading: budgetLoading } = useFetch(budgetQuery);

    useEffect(() => {
        if (spentData) {
            setSpent(spentData[0]?.total || 0);
        }
        if (budgetData) {
            setBudget(budgetData[0]?.total || 0);
        }
    }, [spentData, budgetData]);

    const styles = StyleSheet.create({
        container: {
            margin: 10,
            borderRadius: 5,
            alignItems: 'center',
            justifyContent: 'center'
        },
        text: {
            fontSize: 26,
            color: colors.primaryText
        },
        boldText: {
            fontWeight: 'bold'
        }
    });

    if (spentLoading || budgetLoading) {
        return <Text>Loading...</Text>;
    }

    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                You have spent <Text style={styles.boldText}>{spent.toFixed(2)}€</Text> out of your budget of <Text style={styles.boldText}>{budget.toFixed(2)}€</Text>.
            </Text>
        </View>
    );
};

export default BudgetOverview;