import { Link, Stack, useLocalSearchParams } from "expo-router";
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 { Ionicons } from "@expo/vector-icons";
import {
ActivityIndicator,
Dimensions,
FlatList,
View,
TextInput,
} from "react-native";
import { useEffect, useState, useRef } from "react";
import { useNoticesStore } from "@/store/noticesStore";
import { useWishlist } from "@/store/wishlistStore";
import { Pressable, ScrollView } from "react-native";
import { getUserById } from "@/api/client";
import * as ScreenOrientation from "expo-screen-orientation";
export default function NoticeDetails() {
const { id } = useLocalSearchParams();
const [images, setImages] = useState([]);
const [isImageLoading, setIsImageLoading] = useState(true);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);
const [notice, setNotice] = useState(null);
const [user, setUser] = useState(null);
const [isUserLoading, setIsUserLoading] = useState(true);
const [isLandscape, setIsLandscape] = useState(false);
const flatListRef = useRef(null);
const [currentIndex, setCurrentIndex] = useState(0);
const [isMessageFormVisible, setIsMessageFormVisible] = useState(false);
const [message, setMessage] = useState("");
const [Email, setEmail] = useState("");
const handleSendMessage = () => {
console.log("Wiadomość do:", user?.email);
console.log("Email nadawcy:", Email);
console.log("Treść:", message);
setIsMessageFormVisible(false);
setMessage("");
setEmail("");
};
const formatDate = (dateString) => {
const date = new Date(dateString);
return date.toLocaleDateString("pl-PL", {
year: "numeric",
month: "2-digit",
day: "2-digit",
});
};
const { getNoticeById, getAllImagesByNoticeId } = useNoticesStore();
const toggleNoticeInWishlist = useWishlist(
(state) => state.toggleNoticeInWishlist
);
const isInWishlist = useWishlist((state) =>
id ? state.wishlistNotices.some((item) => item.noticeId == id) : false
);
const onViewableItemsChanged = useRef(({ viewableItems }) => {
if (viewableItems.length > 0) {
setCurrentIndex(viewableItems[0].index);
}
}).current;
const viewabilityConfig = useRef({
itemVisiblePercentThreshold: 70,
}).current;
useEffect(() => {
const unlockOrientation = async () => {
try {
await ScreenOrientation.unlockAsync();
} catch (err) {
console.error("Error unlocking orientation:", err);
}
};
const getInitialOrientation = async () => {
try {
const orientation = await ScreenOrientation.getOrientationAsync();
setIsLandscape(
orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT
);
} catch (err) {
console.error("Error getting initial orientation:", err);
}
};
unlockOrientation();
getInitialOrientation();
// Listen for orientation changes
const subscription = ScreenOrientation.addOrientationChangeListener(
({ orientationInfo }) => {
const isLandscapeMode =
orientationInfo.orientation ===
ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
orientationInfo.orientation ===
ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
setIsLandscape(isLandscapeMode);
}
);
return () => {
ScreenOrientation.removeOrientationChangeListener(subscription);
ScreenOrientation.lockAsync(
ScreenOrientation.OrientationLock.PORTRAIT_UP
).catch((err) =>
console.error("Error locking orientation on unmount:", err)
);
};
}, []);
useEffect(() => {
const fetchNotice = async () => {
setIsLoading(true);
try {
const noticeData = getNoticeById(Number(id));
if (noticeData) {
setNotice(noticeData);
setError(null);
} else {
setError(new Error(`Notice with ID ${id} not found.`));
}
} catch (err) {
setError(err);
} finally {
setIsLoading(false);
}
};
fetchNotice();
}, [id]);
useEffect(() => {
const fetchImage = async () => {
setIsImageLoading(true);
if (notice) {
try {
const fetchedImages = await getAllImagesByNoticeId(notice.noticeId);
setImages(
fetchedImages && fetchedImages.length > 0
? fetchedImages
: ["https://http.cat/404.jpg"]
);
} catch (err) {
console.error("Error while loading images:", err);
setImages(["https://http.cat/404.jpg"]);
} finally {
setIsImageLoading(false);
}
}
};
if (notice) {
fetchImage();
}
}, [notice]);
useEffect(() => {
const fetchUser = async () => {
if (notice && notice.clientId) {
setIsUserLoading(true);
try {
const userData = await getUserById(notice.clientId);
setUser(userData);
} catch (err) {
console.error("Nie udało się pobrać danych użytkownika:", err);
} finally {
setIsUserLoading(false);
}
}
};
fetchUser();
}, [notice]);
if (isLoading) {
return ;
}
if (error) {
return Błąd, spróbuj ponownie później: {error.message};
}
if (!notice) {
return Nie znaleziono ogłoszenia;
}
const renderImageSection = () => {
if (isImageLoading) {
return (
);
}
return (
(
)}
keyExtractor={(item, index) => index.toString()}
/>
{images.length > 1 && (
{images.map((_, index) => (
))}
)}
);
};
return (
{renderImageSection()}
{formatDate(notice.publishDate)}
{notice.title}
Cena:
{notice.price} zł
{
toggleNoticeInWishlist(id);
}}
>
Kategoria:{" "}
{notice.category}
Opis ogłoszenia
{notice.description}
Użytkownik:
{isUserLoading ? (
) : user ? (
<>
{user.firstName} {user.lastName}
Email: {user.email}
setIsMessageFormVisible(true)}
className="mt-3 bg-primary-500 py-2 px-4 rounded-md"
>
Wyślij wiadomość
Zobacz więcej ogłoszeń od {user.firstName}
) : (
Błąd podczas ładowania danych użytkownika
)}
{isMessageFormVisible && (
Wyślij wiadomość do {user?.firstName}
Do:
{user?.email || "Brak adresu e-mail"}
Twój e-mail:
setIsMessageFormVisible(false)}
className="bg-gray-300 py-2 px-4 rounded-md"
>
Anuluj
Wyślij
)}
);
}