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.SAVING);

    const { total, expenseTotal } = data;

    const remaining = total - expenseTotal;

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

    return (
        <Text style={[styles.text, { color: colors.primaryText }]}>
            {remaining >= 0 ? (
                <>
                    You have saved <Text style={[styles.boldText, { color: badColor }]}>{expenseTotal.toFixed(2)}€</Text> out of your Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€ </Text>.
                </>
            ) : (
                <>
                    You have surpassed your Savings Goal of <Text style={[styles.boldText]}>{total.toFixed(2)}€</Text> by <Text style={[styles.boldText, { color: goodColor }]}>{Math.abs(remaining).toFixed(2)}€</Text>.
                </>
            )}
        </Text>
    );
};

export default BudgetTotal;