cally/components/shared/AssigneesDisplay.tsx

import React from "react";
import {StyleSheet} from "react-native";
import {Image, Text, TouchableOpacity, View} from "react-native-ui-lib";
import RemoveAssigneeBtn from "./RemoveAssigneeBtn";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";

const AssigneesDisplay = ({selectedAttendees, setSelectedAttendees}: {
    selectedAttendees: string[],
    setSelectedAttendees: (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) => {
        setSelectedAttendees((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 ? (
                        <Image
                            source={{uri: member?.pfp}}
                            style={[styles.image, {borderWidth: 2, borderColor: member.eventColor || 'transparent'}]}
                            children={<RemoveAssigneeBtn/>}
                        />
                    ) : (
                        <View style={[styles.initialsCircle, {borderWidth: 2, borderColor: member.eventColor || 'transparent', backgroundColor: member.eventColor || 'gray'}]}>
                            <Text style={styles.initialsText}>
                                {getInitials(member.firstName, member.lastName)}
                            </Text>
                        </View>
                    )}
                    <RemoveAssigneeBtn/>
                </TouchableOpacity>
            ))}

            {selectedAttendees?.length === 0 && <Text style={{ fontSize: 14 }}>No attendees added</Text>}
        </View>
    );
};

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: {
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 100, // Circular shape
        width: '100%',
        height: '100%',
    },
    initialsText: {
        color: '#fff',
        fontSize: 24,
        fontWeight: 'bold',
    },
});

export default AssigneesDisplay;