import {Stack, useLocalSearchParams} from "expo-router";
import {Box} from "@/components/ui/box";
import {Button, ButtonText} from "@/components/ui/button";
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 {Icon, FavouriteIcon} from "@/components/ui/icon";
import {useQuery} from "@tanstack/react-query";
import {getImageByNoticeId, getNoticeById} from "@/api/notices";
import {ActivityIndicator} from "react-native";
import {useEffect, useState} from "react";

export default function NoticeDetails() {
    const {id} = useLocalSearchParams();
    const [image, setImage] = useState(null);
    const [isImageLoading, setIsImageLoading] = useState(true);

    const {
        data: notice,
        isLoading,
        error,
    } = useQuery({
        queryKey: ["notices", id],
        queryFn: () => getNoticeById(Number(id)),
    });

    useEffect(() => {
        const fetchImage = async () => {
            setIsImageLoading(true);
            if (notice) {
                try {
                    const imageData = await getImageByNoticeId(notice.noticeId);
                    setImage(imageData);
                } catch (err) {
                    console.error("Błąd przy pobieraniu obrazu:", err);
                } finally {
                    setIsImageLoading(false);
                }
            }
        };

        fetchImage();
    }, [notice]);

    if (isLoading) {
        return <ActivityIndicator/>;
    }

    if (error) {
        return <Text>Błąd, spróbuj ponownie póżniej</Text>;
    }

    return (
        <Card className="p-0 rounded-lg  m-3 flex-1">
            <Stack.Screen
                options={{
                    title: notice.title,
                }}
            />
            {isImageLoading ? (
                <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>
                    <Icon
                        as={FavouriteIcon}
                        size="sm"
                        className="text-primary-500 w-6 h-6"
                    />
                </Box>
            </VStack>
        </Card>
    );
}