import { ActivityIndicator, FlatList, StyleSheet, View } from "react-native";

import { EmptyState } from "@/components/ui/EmptyState";

import { SectionHeader } from "@/components/ui/Sections";

import { NotificationRow } from "@/components/notifications/NotificationRow";

import { useNotificationsInfinite } from "@/hooks";

import { Colors, Spacing } from "@/constants/theme";

export default function NotificationsInbox() {

  const {

    data,

    isLoading,

    fetchNextPage,

    hasNextPage,

    isFetchingNextPage,

  } = useNotificationsInfinite();

  const notifications = data?.pages.flatMap((page) => page.notifications) ?? [];

  return (

    <View style={styles.container}>

      <FlatList

        testID="notifications-list"

        data={notifications}

        keyExtractor={(notification) => String(notification.id)}

        renderItem={({ item }) => <NotificationRow notification={item} />}

        ListHeaderComponent={

          notifications.length > 0 ? <SectionHeader title="Recentes" /> : null

        }

        contentContainerStyle={styles.content}

        onEndReachedThreshold={0.5}

        onEndReached={() => {

          if (hasNextPage && !isFetchingNextPage) fetchNextPage();

        }}

        ListEmptyComponent={

          isLoading ? (

            <ActivityIndicator style={styles.footer} color={Colors.light.tint} />

          ) : (

            <EmptyState

              title="Nenhuma notificação"

              subtitle="Avisaremos você quando algo chegar."

              icon="notifications-off-outline"

            />

          )

        }

        ListFooterComponent={

          isFetchingNextPage ? (

            <ActivityIndicator style={styles.footer} color={Colors.light.tint} />

          ) : null

        }

      />

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: Colors.light.background,

  },

  content: {

    paddingHorizontal: Spacing.containerPadding,

    paddingVertical: Spacing.sectionGap,

  },

  footer: {

    paddingVertical: Spacing.cardGap,

  },

});