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 { getNoticeById } from "@/api/notices";
import { ActivityIndicator } from "react-native";

export default function NoticeDetails() {
  const { id } = useLocalSearchParams();

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

  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 }} />
      <Image
        source={{
          uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
        }}
        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>
  );
}