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} 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("https://http.cat/404.jpg");

    useEffect(() => {
        const fetchImage = async () => {
            let imageUrl = await getImageByNoticeId(notice.noticeId);
            setImage(imageUrl);
        };

        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">
                    <Image
                        source={{
                            uri: image,
                        }}
                        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>
    );
}