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';

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 BudgetData = [
        { name: 'Utilities', color: '#20B2AA', maxValue: 80, currentValue: 46 },
        { name: 'Food', color: '#FF6347', maxValue: 88, currentValue: 31 },
    ];

    const SavingsData = [
        { name: 'Education', color: '#FF6347', maxValue: 135, currentValue: 0 },
        { name: 'Rent', color: '#DA70D6', maxValue: 140, currentValue: 96 },
        { name: 'Food', color: '#F08080', maxValue: 84, currentValue: 78 },
        { name: 'Healthcare', color: '#20B2AA', maxValue: 134, currentValue: 48 },
        { name: 'Healthcare', color: '#32CD32', maxValue: 119, currentValue: 69 },
        { name: 'Clothing', color: '#32CD32', maxValue: 115, currentValue: 99 },
    ];

    const categoryData = [
        { category: 'Food', value: 50 },
        { category: 'Rent', value: 300 },
        { category: 'Utilities', value: 100 },
    ];

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

    return (
        <View style={styles.container}>
            <ScrollView>
                <DebugMenu />
                <Widget title="Budget Overview" />
                <Widget>
                    <BudgetRemaining budget={budget} spent={spent} />
                </Widget>
                <Widget text='#TODO Insert Pie-Chart' image={require('../../../assets/images/8b14el.jpg')}/>
                <Widget>
                    <BudgetOverview budget={budget} spent={spent} />
                </Widget>
                <Widget title="Budget Progress">
                    <CategoryProgressBarList categories={BudgetData} />
                </Widget>
                <Widget title="Savings Progress">
                    <CategoryProgressBarList categories={SavingsData} />
                </Widget>
            </ScrollView>
        </View>
    );
}