import {ScrollView, Text, View} from "react-native";
import Card from "../components/card";
import Accordion from "../components/acordion";
import {LayoutScrollView} from "../components/screens/layout";
import {useSnapshot} from "valtio";
import NotificationStore, {getNotifications} from "../store/notificationStore";
import {useEffect} from "react";
import {useNavigation} from "@react-navigation/native";
import Api from "../services/api";



const Notification = () => {

    const {notifications} = useSnapshot(NotificationStore)
    const navigation = useNavigation();

    useEffect(() => {
        navigation.addListener('blur', () => {
            NotificationStore.newNotificationBadge = 0
            // todo set notification to recited by calling http endpoint
            Api.setNotificationsRecited({notificationIds: notifications.map(elem => elem.id)})
                .then(() => {
                    // Revalidate it
                    getNotifications()
                })

        })
    }, []);


    return (
        <LayoutScrollView title={"Уведомления"}>
                <Accordion title={"Новые"} style={{marginBottom: 20}}>
                    {
                        notifications
                            .filter(notification => !notification.is_recited)
                            .map((notification) => (
                                <Card.Block key={notification.id}>
                                    <Card.Header>
                                        <Card.TitleHeader>
                                            {notification.title}
                                        </Card.TitleHeader>
                                    </Card.Header>
                                    <Card.Body>
                                        <Card.TextSmall>
                                            {notification.description}
                                        </Card.TextSmall>
                                    </Card.Body>
                                </Card.Block>
                            ))
                    }

                </Accordion>

                <Accordion title={"Прочитанные"} style={{marginBottom: 20}}>
                    {
                        notifications
                            .filter(notification => notification.is_recited)
                            .map(notification => (
                                <Card.Block key={notification.id}>
                                    <Card.Header>
                                        <Card.TitleHeader>
                                            {notification.title}
                                        </Card.TitleHeader>
                                    </Card.Header>
                                    <Card.Body>
                                        <Card.TextSmall>
                                            {notification.description}
                                        </Card.TextSmall>
                                    </Card.Body>
                                </Card.Block>
                            ))
                    }

                </Accordion>
        </LayoutScrollView>
    )
}

export default Notification