import React, { useEffect } from 'react';
import { StyleSheet, Text, View, TextInput } from 'react-native';
import { sqlite_exec_query } from '../db/query';


function DepensesList(props)
{
    const [depenses, onGetDepenses] = React.useState([]);
    useEffect( () => {
        sqlite_exec_query("select * from expense", (res) => {
            onGetDepenses(res.rows._array);
        })
    });
    let content = []

    depenses
        .sort((a,b) => (a.date > b.date) ? -1 : (b.date > a.date) ? 1 : 0)
        .forEach( function(depense){
        content.push(
            <View key={"depense_list_depense"+depense.id} style={depense_list_style.depense_list_entry}>
                <Text >{depense.description}</Text>
                <Text >{depense.value}</Text>
            </View>
        )
    });

    return(
    <View>
        {content}
    </View>
    )
}

const depense_list_style = StyleSheet.create({
    depense_list_entry: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-between",
    //   flex: 1,
    //   backgroundColor: '#00FF00',
    //   alignItems: 'center',
    //   justifyContent: 'center',
    }
  });

export default DepensesList