cally/components/pages/main/SignUpPage.tsx

import React, { useState } from "react";
import {Checkbox, Button, View, Text, TextField} from "react-native-ui-lib";
import { useSignUp } from "@/hooks/firebase/useSignUp";
import { ProfileType } from "@/contexts/AuthContext";

const SignUpPage = (props: { unsetRegister: () => any }) => {
    const [email, setEmail] = useState<string>("");
    const [password, setPassword] = useState<string>("");
    const [isParent, setIsParent] = useState<boolean>(true);
    const [isChild, setIsChild] = useState<boolean>(false);
    const [isCaregiver, setIsCaregiver] = useState<boolean>(false);
    const [profileType, setProfileType] = useState<ProfileType>(
        ProfileType.PARENT
    );
    const { mutateAsync: signUp } = useSignUp();

    const handleSignUp = async () => {
        await signUp({ email, password });
    };

    return (
        <View padding-10>
            <TextField
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                style={{ marginBottom: 10 }}
                floatingPlaceholder
            />
            <TextField
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                style={{ marginBottom: 10 }}
                floatingPlaceholder
            />
            <Button
                label="Register"
                onPress={handleSignUp}
                style={{ marginBottom: 10 }}
            />
            <Text style={{ marginBottom: 10 }}>Choose Profile Type:</Text>
            <Checkbox
                label="Parent"
                value={isParent}
                onValueChange={(value) => {
                    setIsParent(value);
                    setProfileType(ProfileType.PARENT);
                    if (value) {
                        setIsChild(false);
                        setIsCaregiver(false);
                    }
                }}
                style={{ marginBottom: 10 }}
            />
            <Checkbox
                label="Child"
                value={isChild}
                onValueChange={(value) => {
                    setIsChild(value);
                    setProfileType(ProfileType.CHILD);
                    if (value) {
                        setIsParent(false);
                        setIsCaregiver(false);
                    }
                }}
                style={{ marginBottom: 10 }}
            />
            <Checkbox
                label="Caregiver"
                value={isCaregiver}
                onValueChange={(value) => {
                    setIsCaregiver(value);
                    setProfileType(ProfileType.CAREGIVER);
                    if (value) {
                        setIsParent(false);
                        setIsChild(false);
                    }
                }}
            />
            <Text center style={{ marginBottom: 5, marginTop: 10 }}>
                Already have an account?
            </Text>
            <Button
                label="Sign In"
                margin-0
                link
                text200
                onPress={props.unsetRegister}
            />
        </View>
    );
};

export default SignUpPage;