import { StyleSheet, View, Text, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
import { useThemeColor } from "../hooks/hooks";
import { SafeAreaView } from 'react-native-safe-area-context'
import { ExpenseItem, Plus, Welcome, SearchBar } from '../components';
import { FlatList, TextInput } from 'react-native-gesture-handler';
import { useRef, useState } from 'react';
import React from 'react';

export default function Page() {

    const [plusShow, setPlusShow] = useState(true);
    const prevOffset = useRef(0);
    const styles = StyleSheet.create({
        container: {
            flex: 1,
            alignItems: "center",
            justifyContent: "center",
        },
        text: {
            color: useThemeColor("color"),
            fontSize: 70,
            fontWeight: "bold"
        }
    });

    const profile = require("../assets/images/profile.jpg")

    const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>)=>{
        const currentOffset = event.nativeEvent.contentOffset.y >= 0 ? event.nativeEvent.contentOffset.y : 0
        const isScrollingUp : boolean = currentOffset <= prevOffset.current;
        const isTop : boolean = currentOffset === 0
        prevOffset.current = currentOffset
        setPlusShow(isScrollingUp || isTop)
    }
   
    const data = [
        {id:"1",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"1 Super fancy spending with long name that will not display", value: "€ 30,00"},
        {id:"2",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"2 Super fancy spending", value: "€ 30,00"},
        {id:"3",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"3 Super fancy spending", value: "€ 30,00"},
        {id:"4",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"4 Super fancy spending", value: "€ 30,00"},
        {id:"5",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"5 Super fancy spending", value: "€ 30,00"},
        {id:"6",category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"6 Super fancy spending with long name that will not display", value: "€ 30,00"},
        {id:"7",category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"7 Super fancy spending", value: "€ 30,00"},
        {id:"8",category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"8 Super fancy spending", value: "€ 30,00"},
        {id:"9",category: "Category 1", color: "blue", date:"01.01.2023 18:00", title:"9 Super fancy spending", value: "€ 30,00"},
        {id:"10" ,category: "Category 2", color: "red", date:"01.01.2023 18:00", title:"10 Super fancy spending", value: "€ 30,00"},
        {id:"11" ,category: "Category 3", color: "green", date:"01.01.2023 18:00", title:"11 Super fancy spending", value: "€ 30,00"},
        {id:"12" ,category: "Category 4", color: "orange", date:"01.01.2023 18:00", title:"12 Super fancy spending", value: "€ 30,00"},
    ]


    return (
        <SafeAreaView style={{flex: 1}}>
           {plusShow && <Plus/>}
            {/* <Welcome name="My User" image={profile} onPress={()=>console.log("hello")}></Welcome> */}

            <FlatList
            data={data}
            ListHeaderComponent={
                <>
                <Welcome name="My Dude" image={profile} onPress={()=>console.log("hello")}></Welcome>
                <SearchBar placeholder='Type to Search...'></SearchBar>
                </>
            }
            renderItem = {({item}) => <ExpenseItem category={item.category} color={item.color} date={item.date} title={item.title} value={item.value}/>}
            keyExtractor={item => item.id}
            ItemSeparatorComponent={()=><View style={{marginVertical: 5}}></View>}
            onScroll={handleScroll}
            scrollEventThrottle={20}
            >
            </FlatList>            
        </SafeAreaView>
        
    );
}