cally/components/pages/settings/user_settings_views/MyGroup.tsx

import {
    Avatar,
    Button,
    Card,
    Colors,
    Dialog,
    FloatingButton,
    PanningProvider,
    Picker,
    Text,
    TextField,
    TouchableOpacity,
    View
} from "react-native-ui-lib";
import React, {useState} from "react";
import {ScrollView, StyleSheet} from "react-native";
import {PickerSingleValue} from "react-native-ui-lib/src/components/picker/types";
import {useCreateSubUser} from "@/hooks/firebase/useCreateSubUser";
import {ProfileType} from "@/contexts/AuthContext";
import {useGetFamilyMembers} from "@/hooks/firebase/useGetFamilyMembers";
import UserMenu from "@/components/pages/settings/user_settings_views/UserMenu";

const MyGroup = () => {
    const [showAddUserDialog, setShowAddUserDialog] = useState(false);
    const [showNewUserInfoDialog, setShowNewUserInfoDialog] = useState(false);
    const [selectedStatus, setSelectedStatus] = useState<string | PickerSingleValue>(ProfileType.CHILD);
    const [firstName, setFirstName] = useState('');
    const [lastName, setLastName] = useState('');
    const [email, setEmail] = useState('');

    const {mutateAsync: createSubUser, isLoading, isError} = useCreateSubUser();
    const {data: familyMembers} = useGetFamilyMembers(true);

    const parents = familyMembers?.filter(x => x.userType === ProfileType.PARENT) ?? [];
    const children = familyMembers?.filter(x => x.userType === ProfileType.CHILD) ?? [];
    const caregivers = familyMembers?.filter(x => x.userType === ProfileType.CAREGIVER) ?? [];

    const handleCreateSubUser = async () => {
        if (!firstName || !lastName || !email) {
            console.error("All fields are required");
            return;
        }

        if (!email.includes("@")) {
            console.error("Invalid email address");
            return;
        }

        await createSubUser({
            firstName,
            lastName,
            email,
            password: email,
            userType: selectedStatus as ProfileType
        });

        if (!isError) {
            setShowNewUserInfoDialog(false);
        }
    };

    console.log(familyMembers)

    return (
        <View style={{flex: 1, height: "100%"}}>
            <View>
                <ScrollView style={styles.card}>
                    {(!parents.length && !children.length && !caregivers.length) && (
                        <Text text70 marginV-10>
                            {isLoading ? "Loading...." : "No user devices added"}
                        </Text>
                    )}

                    {(!!parents.length || !!children.length) && (
                        <>
                            <Text text70 marginV-10>
                                Family
                            </Text>
                            {[...parents, ...children]?.map(member => (
                                <Card enableShadow={false} elevation={0} key={`${member.firstName}_${member.lastName}`}
                                      style={styles.familyCard} row centerV padding-10>
                                    <Avatar
                                        source={{uri: 'https://via.placeholder.com/60'}}
                                        size={40}
                                        backgroundColor={Colors.grey60}
                                    />
                                    <View marginL-10>
                                        <Text text70M>{member.firstName} {member.lastName}</Text>
                                        <Text text90
                                              grey40>{member.userType === ProfileType.PARENT ? "Admin (You)" : "Child"}</Text>
                                    </View>

                                    <View flex-1/>

                                    <UserMenu userId={member?.uid!}/>
                                </Card>
                            ))}
                        </>
                    )}

                    {!!caregivers.length && (
                        <>
                            <Text text70 marginB-10 marginT-15>
                                Caregivers
                            </Text>
                            {caregivers?.map(member => (
                                <Card enableShadow={false} elevation={0} key={`${member.firstName}_${member.lastName}`}
                                      style={styles.familyCard} row centerV padding-10>
                                    <Avatar
                                        source={{uri: 'https://via.placeholder.com/60'}}
                                        size={40}
                                        backgroundColor={Colors.grey60}
                                    />
                                    <View marginL-10>
                                        <Text text70M>{member.firstName} {member.lastName}</Text>
                                        <Text text90 grey40>Caregiver</Text>
                                    </View>
                                </Card>
                            ))}
                        </>
                    )}
                </ScrollView>
            </View>

            <FloatingButton fullWidth hideBackgroundOverlay visible
                            button={{label: '+ Add a user device', onPress: () => setShowAddUserDialog(true)}}/>

            <Dialog
                visible={showAddUserDialog}
                onDismiss={() => setShowAddUserDialog(false)}
                panDirection={PanningProvider.Directions.DOWN}
            >
                <Card padding-25 gap-10>
                    <Text>
                        Add a new user device
                    </Text>

                    <Button backgroundColor={"#FD1775"}><Text white>Show a QR Code</Text></Button>
                    <Button backgroundColor={"#05A8B6"} onPress={() => {
                        setShowAddUserDialog(false)
                        setTimeout(() => {
                            setShowNewUserInfoDialog(true)
                        }, 500)
                    }}><Text white>Enter email address</Text></Button>


                    <TouchableOpacity onPress={() => setShowAddUserDialog(false)} center><Text>Return to user
                        settings</Text></TouchableOpacity>
                </Card>
            </Dialog>

            <Dialog
                panDirection={PanningProvider.Directions.DOWN}
                visible={showNewUserInfoDialog}
                onDismiss={() => setShowNewUserInfoDialog(false)}
            >
                <Card padding-25 style={styles.dialogCard}>
                    <View row spread>
                        <Text text60M>
                            New User Information
                        </Text>
                        <TouchableOpacity onPress={() => setShowAddUserDialog(false)}>
                            <Text>X</Text>
                        </TouchableOpacity>
                    </View>

                    <View row centerV gap-20 marginV-20>
                        <Avatar imageStyle={{borderRadius: 10}} containerStyle={{borderRadius: 10,}} size={60}
                                backgroundColor={Colors.grey60}/>
                        <TouchableOpacity onPress={() => {
                        }}>
                            <Text style={{color: Colors.green10}}>Upload User Profile Photo</Text>
                        </TouchableOpacity>
                    </View>

                    <Text style={styles.label}>Member Status</Text>
                    <Picker
                        editable={!isLoading}
                        value={selectedStatus}
                        //@ts-ignore
                        onChange={item => setSelectedStatus(item)}
                        style={styles.picker}
                        showSearch
                        floatingPlaceholder
                    >
                        <Picker.Item label="Child" value={ProfileType.CHILD}/>
                        <Picker.Item label="Parent" value={ProfileType.PARENT}/>
                        <Picker.Item label="Caregiver" value={ProfileType.CAREGIVER}/>
                    </Picker>


                    <Text style={styles.label}>First Name</Text>
                    <TextField
                        editable={!isLoading}
                        placeholder="First name"
                        value={firstName}
                        onChangeText={setFirstName}
                        style={styles.inputField}
                    />

                    <Text style={styles.label}>Last Name</Text>
                    <TextField
                        editable={!isLoading}
                        placeholder="Last name"
                        value={lastName}
                        onChangeText={setLastName}
                        style={styles.inputField}
                    />

                    <Text style={styles.label}>Email Address</Text>
                    <TextField
                        editable={!isLoading}
                        placeholder="Email address"
                        value={email}
                        onChangeText={setEmail}
                        keyboardType="email-address"
                        autoCapitalize="none"
                        style={styles.inputField}
                    />

                    <Button
                        disabled={!firstName || !lastName || !email || isLoading}
                        label={isLoading ? "Adding..." : "Add group member"}
                        backgroundColor="#FD1775"
                        style={{marginTop: 20}}
                        onPress={handleCreateSubUser}
                    />
                </Card>
            </Dialog>
        </View>
    );
};

const styles = StyleSheet.create({
    card: {
        marginVertical: 15,
        backgroundColor: "white",
        width: "100%",
        borderRadius: 15,
        padding: 20,
    },
    familyCard: {
        marginBottom: 10,
        borderRadius: 10,
        backgroundColor: Colors.white,
        width: "100%"
    },
    inputField: {
        borderRadius: 50,
        paddingVertical: 12,
        paddingHorizontal: 16,
        backgroundColor: Colors.grey80,
        marginBottom: 16,
        borderColor: Colors.grey50,
        borderWidth: 1,
        height: 40,
    },
    picker: {
        borderRadius: 50,
        paddingVertical: 12,
        paddingHorizontal: 16,
        backgroundColor: Colors.grey80,
        marginBottom: 16,
        borderColor: Colors.grey50,
        borderWidth: 1,
        marginTop: -20,
        height: 40,
    },
    label: {
        marginBottom: 5,
        fontSize: 12,
        color: Colors.grey40,
    },
    dialogCard: {
        borderRadius: 10,
        gap: 10,
    },
});

export default MyGroup;