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, View} from "react-native";
import {useWishlist} from "@/store/wishlistStore";
import {useNoticesStore} from "@/store/noticesStore";
import {Ionicons} from "@expo/vector-icons";
import {useEffect, useState} from "react";

export function NoticeCard({notice}) {
    const noticeId = notice?.noticeId;

    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
    const isInWishlist = useWishlist((state) =>
        noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
    );

    const [image, setImage] = useState(null);
    const [isLoading, setIsLoading] = useState(true);

    const {getAllImagesByNoticeId} = useNoticesStore();

    useEffect(() => {
        let isMounted = true;

        const fetchImage = async () => {
            if (!noticeId) {
                if (isMounted) {
                    setImage("https://http.cat/404.jpg");
                    setIsLoading(false);
                }
                return;
            }

            setIsLoading(true);
            try {
                const images = await getAllImagesByNoticeId(noticeId);
                if (isMounted) {
                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
                }
            } catch (error) {
                console.error(`Error while loading image: ${error}`);
                if (isMounted) {
                    setImage("https://http.cat/404.jpg");
                }
            } finally {
                if (isMounted) {
                    setIsLoading(false);
                }
            }
        };

        fetchImage();

        return () => {
            isMounted = false;
        };
    }, [noticeId]);

    if (!notice) {
        return <View style={{flex: 1}} />;
    }

    return (
        <Link href={`/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,
                            }}
                            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(noticeId);
                                    } else {
                                        addNoticeToWishlist(notice);
                                    }
                                }}
                            >
                                <Ionicons
                                    name={isInWishlist ? "heart" : "heart-outline"}
                                    size={24}
                                    color={"primary-heading-500"}
                                />
                            </Pressable>
                        </Box>
                    </VStack>
                </Card>
            </Pressable>
        </Link>
    );
}