cally/components/pages/main/SignUpPage.tsx

import React, {useRef, useState} from "react";
import {
    Button,
    ButtonSize,
    Checkbox,
    Text,
    TextField,
    TextFieldRef,
    TouchableOpacity,
    View,
} from "react-native-ui-lib";
import {useSignUp} from "@/hooks/firebase/useSignUp";
import {StyleSheet} from "react-native";
import {AntDesign} from "@expo/vector-icons";
import KeyboardManager from "react-native-keyboard-manager";

KeyboardManager.setEnableAutoToolbar(true);

const SignUpPage = ({
                        setTab,
                    }: {
    setTab: React.Dispatch<
        React.SetStateAction<"register" | "login" | "reset-password">
    >;
}) => {
    const [email, setEmail] = useState<string>("");
    const [firstName, setFirstName] = useState<string>("");
    const [lastName, setLastName] = useState<string>("");
    const [password, setPassword] = useState<string>("");

    const [isPasswordVisible, setIsPasswordVisible] = useState<boolean>(false);
    const [allowFaceID, setAllowFaceID] = useState<boolean>(false);
    const [acceptTerms, setAcceptTerms] = useState<boolean>(false);
    const {mutateAsync: signUp} = useSignUp();

    const lnameRef = useRef<TextFieldRef>(null);
    const emailRef = useRef<TextFieldRef>(null);
    const passwordRef = useRef<TextFieldRef>(null);

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

    return (
        <View height={"100%"} padding-15 marginT-30>
            <Text style={styles.title}>Get started with Cally</Text>
            <Text style={styles.subtitle} marginT-15 color="#919191">
                Please enter your details.
            </Text>
            <TextField
                marginT-30
                autoFocus
                placeholder="First name"
                value={firstName}
                onChangeText={setFirstName}
                style={styles.textfield}
                onSubmitEditing={() => {
                    lnameRef.current?.focus();
                }}
                blurOnSubmit={false}
                accessibilityLabel="First name input"
                accessibilityHint="Enter your first name"
                accessible
                returnKeyType="next"
                textContentType="givenName"
                importantForAccessibility="yes"
            />
            <TextField
                ref={lnameRef}
                placeholder="Last name"
                value={lastName}
                onChangeText={setLastName}
                style={styles.textfield}
                onSubmitEditing={() => {
                    emailRef.current?.focus();
                }}
                blurOnSubmit={false}
                accessibilityLabel="Last name input"
                accessibilityHint="Enter your last name"
                accessible
                returnKeyType="next"
                textContentType="familyName"
                importantForAccessibility="yes"
            />
            <TextField
                placeholder="Email"
                keyboardType={"email-address"}
                returnKeyType={"next"}
                textContentType={"emailAddress"}
                defaultValue={email}
                onChangeText={setEmail}
                style={styles.textfield}
                autoComplete={"email"}
                autoCorrect={false}
                ref={emailRef}
                onSubmitEditing={() => {
                    passwordRef.current?.focus();
                }}
            />
            <View
                centerV
                style={[styles.textfield, {padding: 0, paddingHorizontal: 30}]}
            >
                <TextField
                    ref={passwordRef}
                    placeholder="Password"
                    style={styles.jakartaLight}
                    value={password}
                    onChangeText={setPassword}
                    secureTextEntry={!isPasswordVisible}
                    trailingAccessory={
                        <TouchableOpacity
                            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
                        >
                            <AntDesign
                                name={isPasswordVisible ? "eye" : "eyeo"}
                                size={24}
                                color="gray"
                            />
                        </TouchableOpacity>
                    }
                />
            </View>
            <View gap-5 marginT-15>
                <View row centerV>
                    <Checkbox
                        style={[styles.check]}
                        color="#919191"
                        value={allowFaceID}
                        onValueChange={(value) => {
                            setAllowFaceID(value);
                        }}
                    />
                    <Text style={styles.jakartaLight} marginL-10>
                        Allow FaceID for login in future
                    </Text>
                </View>
                <View row centerV>
                    <Checkbox
                        style={styles.check}
                        color="#919191"
                        value={acceptTerms}
                        onValueChange={(value) => setAcceptTerms(value)}
                    />
                    <View row>
                        <Text style={styles.jakartaLight} marginL-10>
                            I accept the
                        </Text>
                        <TouchableOpacity>
                            <Text text90 style={styles.jakartaMedium}>
                                {" "}
                                terms and conditions
                            </Text>
                        </TouchableOpacity>
                        <Text style={styles.jakartaLight}> and </Text>
                        <TouchableOpacity>
                            <Text text90 style={styles.jakartaMedium}>
                                {" "}
                                privacy policy
                            </Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
            <View flex-1/>
            <View style={styles.bottomView}>
                <Button
                    label="Register"
                    labelStyle={{
                        fontFamily: "PlusJakartaSans_600SemiBold",
                        fontSize: 16,
                    }}
                    onPress={handleSignUp}
                    style={{marginBottom: 0, backgroundColor: "#fd1775", height: 50}}
                />
                <View row centerH marginT-10 marginB-2 gap-5>
                    <Text style={[styles.jakartaLight, {fontSize: 16, color: "#484848"}]} center>
                        Already have an account?
                    </Text>

                    <Button
                        label="Log in"
                        labelStyle={[
                            styles.jakartaMedium,
                            {fontSize: 16, textDecorationLine: "none", color: "#fd1775"},
                        ]}
                        flexS
                        margin-0
                        link
                        color="#fd1775"
                        size={ButtonSize.small}
                        text70
                        onPress={() => setTab("login")}
                    />
                </View>
            </View>
        </View>
    );
};

export default SignUpPage;

const styles = StyleSheet.create({
    textfield: {
        backgroundColor: "white",
        marginVertical: 8,
        padding: 30,
        height: 44,
        borderRadius: 50,
        fontFamily: "PlusJakartaSans_300Light",
        fontSize: 13,
        color: "#919191",
    },
    //mora da se izmeni kako treba
    bottomView: {marginTop: "auto", marginBottom: 30, marginTop: "auto"},
    jakartaLight: {
        fontFamily: "PlusJakartaSans_300Light",
        fontSize: 13,
        color: "#919191",
    },
    jakartaMedium: {
        fontFamily: "PlusJakartaSans_500Medium",
        fontSize: 13,
        color: "#919191",
        textDecorationLine: "underline",
    },
    title: {fontFamily: "Manrope_600SemiBold", fontSize: 34, marginTop: 50},
    subtitle: {fontFamily: "PlusJakartaSans_400Regular", fontSize: 16},
    check: {
        borderRadius: 3,
        aspectRatio: 1,
        width: 18,
        color: "#919191",
        borderColor: "#919191",
        borderWidth: 1,
    },
});