Added attendees

components/shared/AssigneesDisplay.tsx

@@ -1,23 +1,77 @@
 import React from "react";
-import { ImageBackground, StyleSheet } from "react-native";
-import { View } from "react-native-ui-lib";
+import {ImageBackground, StyleSheet} from "react-native";
+import {Text, TouchableOpacity, View} from "react-native-ui-lib";
 import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
+import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
 
-const AssigneesDisplay = () => {
-  return (
-    <View row marginH-13 marginT-13 gap-20>
-      <ImageBackground
-        source={require("../../assets/images/child-picture.png")}
-        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
-        children={<RemoveAssigneeBtn />}
-      />
-      <ImageBackground
-        source={require("../../assets/images/child1-picture.png")}
-        style={{ aspectRatio: 1, width: 58.08, overflow: "hidden" }}
-        children={<RemoveAssigneeBtn />}
-      />
-    </View>
-  );
+const AssigneesDisplay = ({selectedAttendees, setSlectedAttendees}: {
+    selectedAttendees: string[],
+    setSlectedAttendees: (value: React.SetStateAction<string[]>) => void
+}) => {
+    const {data: members} = useGetFamilyMembers(true);
+
+    const selectedMembers = members?.filter((x) => selectedAttendees.includes(x?.uid!));
+
+    const getInitials = (firstName: string, lastName: string) => {
+        return `${firstName.charAt(0)}${lastName.charAt(0)}`;
+    };
+
+    const removeAttendee = (uid: string) => {
+        setSlectedAttendees((prev) => prev.filter((x) => x !== uid));
+    }
+
+    return (
+        <View row marginH-13 marginT-13 gap-20>
+            {selectedMembers?.map((member) => (
+                <TouchableOpacity key={member.uid} style={styles.assigneeWrapper}
+                                  onPress={() => removeAttendee(member.uid!)}>
+                    {member?.pfp ? (
+                        <ImageBackground
+                            source={{uri: member?.pfp}}
+                            style={styles.image}
+                            children={<RemoveAssigneeBtn/>}
+                        />
+                    ) : (
+                        <View style={styles.initialsCircle}>
+                            <Text style={styles.initialsText}>
+                                {getInitials(member.firstName, member.lastName)}
+                            </Text>
+                        </View>
+                    )}
+                    <RemoveAssigneeBtn/>
+                </TouchableOpacity>
+            ))}
+
+            {selectedAttendees.length === 0 && <Text>No attendees added</Text>}
+        </View>
+    );
 };
 
-export default AssigneesDisplay;
+const styles = StyleSheet.create({
+    assigneeWrapper: {
+        position: 'relative',
+        width: 58.08,
+        aspectRatio: 1,
+    },
+    image: {
+        aspectRatio: 1,
+        width: '100%',
+        borderRadius: 100, // Makes the image circular
+        overflow: 'hidden',
+    },
+    initialsCircle: {
+        backgroundColor: '#ccc',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 100, // Circular shape
+        width: '100%',
+        height: '100%',
+    },
+    initialsText: {
+        color: '#fff',
+        fontSize: 24,
+        fontWeight: 'bold',
+    },
+});
+
+export default AssigneesDisplay;