import React from 'react';
import { StyleSheet, Text, View, TextInput, Alert, Pressable } from 'react-native';
import DepenseListEntry from '../depense_list_entry';
import { strLPad } from '../../utils/util';

export default function DayList(props)
{
    const [ showDepenses, onToggleDepenses] = React.useState(true);
    let content = []

    let total = 0;

    
    props.depenses.forEach( function(depense){
        content.push(
            <DepenseListEntry fetchDepenses={props.fetchDepenses} key={"depense_list_depense"+depense.id} depense={depense}/>
        )
        total += depense.value;
    });
    

    let result = props.dailyObjective - total 
    let text_color = "#000000";
    let bg_color = "#FFFFFF";
    if( result > 0)
        text_color = "#00"+parseInt(100 + (result / props.dailyObjective) * 100).toString(16) + "00"
    else
        bg_color = "#FF"+
            strLPad(parseInt(255 + Math.max(-255,(result / props.dailyObjective) * 100)).toString(16), 2, '0') + 
            strLPad(parseInt(255 + Math.max(-255, (result / props.dailyObjective) * 100)).toString(16), 2, '0')

    return (
        <View style={[day_list_styles.day_list_container, {backgroundColor: bg_color}]}>
            <Pressable 
                style={day_list_styles.day_list_entry}
                onPress={() => {onToggleDepenses(!showDepenses)}}>
            
                <Text style={day_list_styles.day_list_day}>{props.date.toDateString()}</Text>
                <Text style={[day_list_styles.day_list_day, {color: text_color}]}>{"Total : "+total}</Text>
            </Pressable>
            {showDepenses ? content : <View/>}
        </View>
    )
}


const day_list_styles = StyleSheet.create({
    day_list_container: {
        borderWidth: 1,
        margin: 1,
    },
    day_list_entry: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 5,
    },
    day_list_day: {
        fontWeight: '900',
        margin: 4,
    }
});