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

const styles = StyleSheet.create({
    container: {
        margin: 10,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center'
    },
    text: {
        fontSize: 26,
        color: `black`
    },
    boldText: {
        fontWeight: 'bold'
    },
    negativeText: {
        color: 'red',
    },
    positiveText: {
        color: 'green',
    },
});

interface BudgetTotalProps {
    goodColor?: string;
    badColor?: string;
}

const BudgetTotal: React.FC<BudgetTotalProps> = ({ goodColor = 'green', badColor = 'red' }) => {
    const { colors } = useTheme();
    const { data, isLoading } = useCategoryData(CategoryType.EXPENSE);

    const { total, expenseTotal } = data;

    const remaining = total - expenseTotal;

    if (isLoading) {
        return <Text>Loading...</Text>;
    }

    return (
        <Text style={[styles.text, { color: colors.primaryText }]}>
            <>
                You have spent <Text style={[styles.boldText, { color: goodColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Budget of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
            </>
        </Text>
    );
};

export default BudgetTotal;