cally/components/pages/main/SignUpPage.tsx

import React, {useState} from "react";
import {Button, ButtonSize, Text, TextField, View,} from "react-native-ui-lib";
import {useSignUp} from "@/hooks/firebase/useSignUp";
import {ProfileType} from "@/contexts/AuthContext";
import {StyleSheet} from "react-native";
import {AntDesign} from "@expo/vector-icons";

const SignUpPage = (props: { unsetRegister: () => any }) => {
    const [email, setEmail] = useState<string>("");
    const [firstName, setFirstName] = useState<string>("");
    const [lastName, setLastName] = 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, firstName, lastName});
    };

    return (
        <View padding-10>
            <Text text30 center>
                Get started with Kali
            </Text>
            <Text center>Please enter your details.</Text>
            <TextField
                marginT-60
                placeholder="First name"
                value={firstName}
                onChangeText={setFirstName}
                style={styles.textfield}
            />
            <TextField
                placeholder="Last name"
                value={lastName}
                onChangeText={setLastName}
                style={styles.textfield}
            />
            <TextField
                placeholder="Email"
                value={email}
                onChangeText={setEmail}
                style={styles.textfield}
            />
            <TextField
                placeholder="Password"
                value={password}
                onChangeText={setPassword}
                secureTextEntry
                style={styles.textfield}
            />
            <Button
                label="Register"
                onPress={handleSignUp}
                style={{marginBottom: 10, backgroundColor: "#fd1775"}}
            />
            <Button
                label="Sign up with Google"
                backgroundColor="white"
                color="black"
                iconSource={() => (
                    <AntDesign
                        name="google"
                        size={24}
                        color="black"
                        style={{marginRight: 15}}
                    />
                )}
            />
            {/*<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);
                    }
                }}
            />*/}
            <View row centerH marginT-10 marginB-5 gap-5>
                <Text text70 center>
                    Already have an account?
                </Text>


                <Button
                    label="Sign In"
                    flexS
                    margin-0
                    link
                    color="#fd1775"
                    size={ButtonSize.small}
                    text70
                    onPress={props.unsetRegister}
                />
            </View>
        </View>
    );
};

export default SignUpPage;

const styles = StyleSheet.create({
    textfield: {
        backgroundColor: "white",
        marginVertical: 10,
        padding: 30,
        height: 45,
        borderRadius: 50,
    },
});