import React from 'react';
import { StyleSheet, Text, View, Pressable } from 'react-native';
import DayList from './day_list';
import { LinearGradient } from 'expo-linear-gradient';

export default function WeekList(props)
{
    const [ showDays, onToggleDays] = React.useState(false);
    
    let days = []

    let objective = props.dailyObjective * 7 
    let total_payed = 0;


    props.days.forEach(element => {
        element.expenses.forEach( (expense) => {
            total_payed += expense.value;
        })

        days.push(
            <DayList
                key={"daylist_"+element.date}    
                dailyObjective={props.dailyObjective}
                fetchDepenses={props.fetchDepenses}
                date={element.date}
                depenses={element.expenses}
                />
        )
    });

    let scale = Math.min(1, total_payed/objective)

    return (
    <View style={week_list_styles.week_list_container}>
        <View>
        <LinearGradient
                    // Background Linear Gradient
                    colors={[scale > 0 ? '#FFDDDDFF' : '#FFFFFF','#FFFFFF', '#FFFFFF']}
                    locations={[scale, scale + (scale < 0.95 ? 0.05 : 0), 1]}
                    start={{ x: 0, y: 0.0 }}
                    end={{x:1,y:0}}
                    style={week_list_styles.background}
                />   
        <Pressable
            style={week_list_styles.week_header}
            onPress={() => {onToggleDays(!showDays)}}>
                             
                <Text>{"Week " + props.number}</Text>
                <Text>{total_payed+"/"+objective}</Text>
                
        </Pressable>
        {showDays ? days : <View/>}
        </View>
    </View>
    );
}


const week_list_styles = StyleSheet.create({
    week_list_container: {
        borderWidth: 0.5,
        margin: 1,
        marginTop: 25,
        elevation:5,
        
    },
    week_header: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginTop: 5,
        marginBottom: 5,
        padding: 3,
        // elevation: 10,
    },
    background: {
        position: 'absolute',
        width: '100%',
        height: "100%",
    }
});