cally/components/pages/main/SignUpPage.tsx

import React, { useState } from "react";
import {
  Checkbox,
  Button,
  View,
  Text,
  TextField,
  ButtonSize,
} 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 });
  };

  return (
    <View padding-10>
      <Text text30 center>
        Get started with Kali
      </Text>
      <Text>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>
        <Text text70 center style={{ marginBottom: 5, marginTop: 10 }}>
          Already have an account?
        </Text>
        <Button
          label="Sign In"
          margin-0
          link
          color="#fd1775"
          size={ButtonSize.small}
          text200
          onPress={props.unsetRegister}
        />
      </View>
    </View>
  );
};

export default SignUpPage;

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