Added send message form

ArtisanConnect/app/notice/[id].jsx

@@ -6,7 +6,7 @@ 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} from "react-native";
+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";
@@ -29,6 +29,19 @@ export default function NoticeDetails() {
     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 {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
     const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
     const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
@@ -221,7 +234,16 @@ export default function NoticeDetails() {
                     {isUserLoading ? (
                         <ActivityIndicator />
                     ) : user ? (
-                        <Box>
+                        <>
+                        <Box className="mr-4">
+                            <Image
+                                source={{ uri: user.profileImage || "https://th.bing.com/th/id/OIP.3coo_N8sieled8QNroQmkgHaHa?rs=1&pid=ImgDetMain" }} // Domyślny obraz, jeśli brak zdjęcia profilowego
+                                className="h-12 w-12 rounded-full"
+                                alt="Zdjęcie profilowe"
+                            />
+                        </Box>
+
+                        <Box className="flex-1">
                             <Text className="text-xl font-bold text-gray-950">
                                 {user.firstName} {user.lastName}
                             </Text>
@@ -235,6 +257,7 @@ export default function NoticeDetails() {
                                 <Text className="text-white text-center font-bold">Wyślij wiadomość</Text>
                             </Pressable>
                         </Box>
+                        </>
                     ) : (
                         <Text>Błąd podczas ładowania danych użytkownika</Text>
                     )}
@@ -248,6 +271,50 @@ export default function NoticeDetails() {
                 </Box>
             </VStack>
             </ScrollView>
+                {isMessageFormVisible && (
+                    <View className="absolute inset-0 bg-black bg-opacity-50 justify-center items-center z-20">
+                        <View className="bg-white p-4 rounded-lg w-4/5">
+                            <Text className="text-lg font-bold mb-4">Wyślij wiadomość do {user?.firstName}</Text>
+
+                            <Text className="text-sm font-medium mb-1">Do:</Text>
+                            <Text className="bg-gray-100 p-3 rounded text-gray-500">
+                                {user?.email || "Brak adresu e-mail"}
+                            </Text>
+                            <Text className="text-sm font-medium mb-1">Twój e-mail:</Text>
+                            <TextInput
+                                className="border border-gray-300 p-2 rounded"
+                                placeholder="Wpisz swój adres e-mail"
+                                value={Email}
+                                onChangeText={setEmail}
+                            />
+
+                            <TextInput
+                                className="border border-gray-300 rounded-md p-2 mb-4 h-32 text-left"
+                                multiline
+                                numberOfLines={4}
+                                placeholder="Napisz swoją wiadomość..."
+                                value={message}
+                                onChangeText={setMessage}
+                            />
+
+                            <View className="flex-row justify-end space-x-2">
+                                <Pressable
+                                    onPress={() => setIsMessageFormVisible(false)}
+                                    className="bg-gray-300 py-2 px-4 rounded-md"
+                                >
+                                    <Text className="text-gray-800">Anuluj</Text>
+                                </Pressable>
+
+                                <Pressable
+                                    onPress={handleSendMessage}
+                                    className="bg-primary-500 py-2 px-4 rounded-md">
+                                    <Text className="text-white">Wyślij</Text>
+                                </Pressable>
+                            </View>
+                        </View>
+                    </View>
+                )}
+
         </Card>
     );
 }