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

const styles = StyleSheet.create({
    text: {
        fontSize: 26,
    },
    boldText: {
        fontWeight: 'bold',
    },
});

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

    const spentQuery = {
        sql: "SELECT SUM(amount) as total FROM expense",
        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 remaining = budget - spent;

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

    return (
        <Text style={[styles.text, {color: colors.primaryText}]}>
            You have <Text style={styles.boldText}>{remaining.toFixed(2)}€</Text> left.
        </Text>
    );
};

export default BudgetRemaining;