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 toggleNoticeInWishlist = useWishlist(
    (state) => state.toggleNoticeInWishlist
  );
  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={() => {
                  toggleNoticeInWishlist(noticeId);
                }}
              >
                <Ionicons
                  name={isInWishlist ? "heart" : "heart-outline"}
                  size={24}
                  color={"primary-heading-500"}
                />
              </Pressable>
            </Box>
          </VStack>
        </Card>
      </Pressable>
    </Link>
  );
}