import { useState, useCallback } from "react";
import {
View,
Text,
FlatList,
TextInput,
Pressable,
KeyboardAvoidingView,
Platform,
RefreshControl,
type ListRenderItemInfo,
} from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useLocalSearchParams, Stack, useRouter } from "expo-router";
import { Ionicons } from "@expo/vector-icons";
import { useQuery, useMutation } from "convex/react";
import { api } from "../../convex/_generated/api";
import { useAuth } from "../_layout";
import { useTheme } from "../../components/theme";
import { Button } from "../../components/ui/button";
import { Loading } from "../../components/ui/loading";
function formatMessageTime(timestamp: number): string {
return new Date(timestamp).toLocaleTimeString("mk-MK", {
hour: "2-digit",
minute: "2-digit",
});
}
export default function ChatDetailScreen() {
const { id } = useLocalSearchParams<{ id: string }>();
const theme = useTheme();
const router = useRouter();
const insets = useSafeAreaInsets();
const { token, userId, isAuthenticated } = useAuth();
const chat = useQuery(
api.chats.getById,
isAuthenticated && token && id ? { token, chatId: id as any } : "skip"
);
const messages = useQuery(
api.messages.listByChat,
isAuthenticated && token && id ? { token, chatId: id as any } : "skip"
);
const sendMessage = useMutation(api.messages.send);
const [text, setText] = useState("");
const [sending, setSending] = useState(false);
const [refreshing, setRefreshing] = useState(false);
const onRefresh = useCallback(() => {
setRefreshing(true);
setTimeout(() => setRefreshing(false), 800);
}, []);
async function handleSend() {
const content = text.trim();
if (!content || !token || !id) return;
setText("");
setSending(true);
try {
await sendMessage({ token, chatId: id as any, content });
} catch {
setText(content);
} finally {
setSending(false);
}
}
if (!isAuthenticated) {
return (
<>
Најавете се за да ги видите пораките.
);
}
if (!chat || !messages) {
return (
<>
);
}
const otherUserName = chat.otherUser?.name ?? "Непознат";
return (
<>
{messages.length === 0 ? (
Започнете разговор
Испратете порака за да започнете разговор.
) : (
item._id}
inverted
refreshControl={
}
contentContainerStyle={{
paddingVertical: 16,
paddingHorizontal: 16,
}}
ItemSeparatorComponent={() => }
renderItem={({
item,
}: ListRenderItemInfo) => {
const isSelf = item.senderId === userId;
return (
{item.content}
{formatMessageTime(item.createdAt)}
);
}}
style={{ flex: 1 }}
/>
)}
);
}