import { useWishlist } from "@/store/wishlistStore";
import { FlatList } from "react-native";
import { NoticeCard } from "@/components/NoticeCard";
import { Ionicons } from "@expo/vector-icons";
import { Box } from "@/components/ui/box";
import { Text } from "@/components/ui/text";
import { useCallback } from "react";
import { useFocusEffect } from "@react-navigation/native";

export default function Wishlist() {
  const wishlistNotices = useWishlist((state) => state.wishlistNotices);
  const fetchWishlist = useWishlist((state) => state.fetchWishlist);

  useFocusEffect(
    useCallback(() => {
      fetchWishlist();
    }, [fetchWishlist])
  );

  const styles = {
    container: {
      margin: 10,
    },
  };

  if (wishlistNotices.length === 0) {
    return (
      <Box style={styles.container} className="flex-row flex-1 justify-center">
        <Ionicons name="sad-outline" size={24} color="black" />
        <Text>Brak ulubionych ogłoszeń</Text>
      </Box>
    );
  }

  return (
    <FlatList
      data={wishlistNotices}
      key={2}
      numColumns={2}
      columnContainerClassName="m-2"
      columnWrapperClassName="gap-2 m-2"
      renderItem={({ item }) => <NoticeCard notice={item} />}
    />
  );
}