import {Box} from "@/components/ui/box";
import {Card} from "@/components/ui/card";
import {Heading} from "@/components/ui/heading";
import {Image} from "@/components/ui/image";
import {Text} from "@/components/ui/text";
import {VStack} from "@/components/ui/vstack";
import {Link} from "expo-router";
import {Pressable, ActivityIndicator} from "react-native";
import {useWishlist} from "@/store/wishlistStore";
import {Ionicons} from "@expo/vector-icons";
import {useEffect, useState} from "react";
import {getImageByNoticeId} from "@/api/notices";

export function NoticeCard({notice}) {
    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
    const removeNoticeFromWishlist = useWishlist(
        (state) => state.removeNoticeFromWishlist
    );
    const isInWishlist = useWishlist((state) =>
        state.wishlistNotices.some((item) => item.noticeId === notice.noticeId)
    );
    const [image, setImage] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const fetchImage = async () => {
            setIsLoading(true);
            try {
                let imageUrl = await getImageByNoticeId(notice.noticeId);
                setImage(imageUrl);
            } catch (error) {
                console.error("Błąd podczas pobierania obrazu:", error);
            } finally {
                setIsLoading(false);
            }
        };

        fetchImage();
    }, [notice.noticeId]);

    return (
        <Link href={`/notice/${notice.noticeId}`} asChild>
            <Pressable className="flex-1">
                <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
                    {isLoading ? (
                        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
                            <ActivityIndicator size="large" color="#3b82f6" />
                        </Box>
                    ) : (
                        <Image
                            source={{
                                uri: image || "https://http.cat/404.jpg",
                            }}
                            className="h-auto w-full rounded-md aspect-[1/1]"
                            alt="image"
                            resizeMode="cover"
                        />
                    )}
                    <VStack className="p-2">
                        <Text className="text-sm font-normal mb-2 text-typography-700">
                            {notice.title}
                        </Text>
                        <Box className="flex-row items-center">
                            <Heading size="md" className="flex-1">
                                {notice.price}zł
                            </Heading>
                            <Pressable
                                onPress={() => {
                                    if (isInWishlist) {
                                        removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
                                    } else {
                                        addNoticeToWishlist(notice); // Dodaj do ulubionych
                                    }
                                }}
                            >
                                <Ionicons
                                    name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
                                    size={24} // Rozmiar ikony
                                    color={"primary-heading-500"} // Kolor ikony
                                />
                            </Pressable>
                        </Box>
                    </VStack>
                </Card>
            </Pressable>
        </Link>
    );
}