import React, { useEffect } from 'react';
import { StyleSheet, Text, View, TextInput, Pressable } from 'react-native';
import DepenseForm from './depense_edit/depense_form';


export default function DepenseListEntry(props){
    const [editing, toggleEdit] = React.useState(false);


    return(<View style={depense_list_entry_style.depense_list_entry}>
            <Pressable 
            onPress={() => {
                toggleEdit(!editing);
            }}
            style={depense_list_entry_style.pressable_depense_list_entry}>
                    <Text style={depense_list_entry_style.depense_info}>{props.depense.description}</Text>
                    {/* <Text >{new Date(props.depense.date).toDateString()}</Text> */}
                    <Text style={depense_list_entry_style.depense_info}>{props.depense.value}</Text>
            </Pressable>
            {editing ? 
                <DepenseForm fetchDepenses={props.fetchDepenses} onUpdateDepense={(res) => {toggleEdit(res)}} depense={props.depense}/> : 
                <View/>
            }
        
        </View>
    )
}

const depense_list_entry_style = StyleSheet.create({
    depense_list_entry: {
        borderBottomWidth: 0.5
    },
    pressable_depense_list_entry: {
        display: "flex",
        flexDirection: "row",
        justifyContent: "space-evenly",
        margin: 2,
    },
    depense_info: {
        paddingLeft: 50,
        paddingRight: 50,
        width: 200,
    }
  });