import React from 'react';
import { StyleSheet, View, ScrollView } from 'react-native';
import BudgetOverview from '../../../components/stats/BudgetOverview';
import { useTheme } from '../../contexts/ThemeContext';
import Widget from '../../../components/stats/Widget';
import CategoryProgressBarList from '../../../components/stats/CategoryProgressBarList';
import BudgetRemaining from '../../../components/stats/BudgetRemaining';
import DebugMenu from '../../../services/DebugMenu';
import SavingsOverview from '../../../components/stats/SavingsOverview';
import FinancialAdvice from '../../../components/stats/FinancialAdvice';

export default function Page() {
    const { colors } = useTheme();

    // Mock data #TODO Database einbinden
    // what to do when amount too small?

    const spent = 120.75;
    const budget = 696.96;

  

    const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: colors.backgroundColor,
            marginTop: 50,
            alignItems: 'center',
        },
    });

    return (
        <View style={styles.container}>
            <ScrollView>
                <DebugMenu />
                <Widget title='"Financial" Tips' backgroundColor='orange'>
                    <FinancialAdvice/>
                </Widget>
                <Widget title="Budget Overview" />
                <Widget>
                    <BudgetRemaining/>
                </Widget>
                <Widget title='Your Expenses so far' image={require('../../../assets/images/8b14el.jpg')}/>
                <Widget>
                    <BudgetOverview/>
                </Widget>
                <Widget>
                    <SavingsOverview/>
                </Widget>
            </ScrollView>
        </View>
    );
}