import {FlatList, ScrollView, StyleSheet} from "react-native";
import React from "react";
import {Card, Text, View} from "react-native-ui-lib";
import HeaderTemplate from "@/components/shared/HeaderTemplate";
import {useGetNotifications} from "@/hooks/firebase/useGetNotifications";
import {formatDistanceToNow} from "date-fns";

const NotificationsPage = () => {
    const {data: notifications} = useGetNotifications()

    console.log(notifications?.[0]?.timestamp)


    return (
        <View flexG height={"100%"}>
            <View flexG>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator={false}
                >
                    <View marginH-25>
                        <HeaderTemplate
                            message={"Welcome to your notifications!"}
                            isWelcome={false}
                            children={
                                <Text
                                    style={{fontFamily: "Manrope_400Regular", fontSize: 14}}
                                >
                                    See your notifications here.
                                </Text>
                            }
                        />
                        <View>
                            <FlatList data={notifications ?? []} renderItem={({item}) => <Card padding-20 gap-10>
                                <Text text70>{item.content}</Text>
                                <View row spread>
                                    <Text text90>{formatDistanceToNow(new Date(item.timestamp), { addSuffix: true })}</Text>
                                    <Text text90>{item.timestamp.toLocaleDateString()}</Text>
                                </View>
                            </Card>}/>
                        </View>
                    </View>
                </ScrollView>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    searchField: {
        borderWidth: 0.7,
        borderColor: "#9b9b9b",
        borderRadius: 15,
        height: 42,
        paddingLeft: 10,
        marginVertical: 20,
    },
});

export default NotificationsPage;