import React from 'react';
import { View, Text, Button, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import Pie from './Pie';
import Header from './Header';
import { findExpByCat } from './FindExpense';
import { expenses, categories, income, totalExpenses } from '../data';


export default function ExpensesBreakdown({navigation}){
    let data = [];
    categories.forEach(({name}) => {
        let exps = findExpByCat(name);
        let total = 0;
        exps.forEach(({amount}) => {
            total += amount;
        });
        data.push({x: name, y: total});
    });
    data.push({x: 'Remaining', y: income - totalExpenses()})
    return(
        <View>
            <Header name="Expenses Breakdown" />
            <Pie data={data}
            />
        </View>
    );
}