cally/components/pages/main/SignUpPage.tsx

import React, { useState } from "react";
import {
  Button,
  ButtonSize,
  Checkbox,
  Text,
  TextField,
  TouchableOpacity,
  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 = ({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 handleSignUp = async () => {
    await signUp({ email, password, firstName, lastName });
  };

  return (
    <View padding-10 height={"100%"} flexG>
      <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={!isPasswordVisible}
        style={styles.textfield}
        trailingAccessory={
          <TouchableOpacity
            onPress={() => setIsPasswordVisible(!isPasswordVisible)}
          >
            <AntDesign
              name={isPasswordVisible ? "eye" : "eyeo"}
              size={24}
              color="gray"
            />
          </TouchableOpacity>
        }
      />
      <View gap-10 marginH-10>
        <View row centerV>
          <Checkbox
            value={allowFaceID}
            onValueChange={(value) => {
              setAllowFaceID(value);
            }}
          />
          <Text text90R marginL-10>
            Allow FaceID for login in future
          </Text>
        </View>
        <View row centerV>
          <Checkbox
            value={acceptTerms}
            onValueChange={(value) => setAcceptTerms(value)}
          />
          <View row>
            <Text text90R marginL-10>
              I accept the
            </Text>
            <TouchableOpacity>
              <Text text90 style={{ textDecorationLine: "underline" }}>
                {" "}
                terms and conditions
              </Text>
            </TouchableOpacity>
            <Text text90R> and </Text>
            <TouchableOpacity>
              <Text text90 style={{ textDecorationLine: "underline" }}>
                {" "}
                privacy policy
              </Text>
            </TouchableOpacity>
          </View>
        </View>
      </View>
      <View style={styles.bottomView}>
        <Button
          label="Register"
          onPress={handleSignUp}
          style={{ marginBottom: 10, backgroundColor: "#fd1775" }}
        />
        <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={() => setTab("login")}
          />
        </View>
      </View>
    </View>
  );
};

export default SignUpPage;

const styles = StyleSheet.create({
  textfield: {
    backgroundColor: "white",
    marginVertical: 10,
    padding: 30,
    height: 45,
    borderRadius: 50,
  },
  //mora da se izmeni kako treba
  bottomView: { marginTop: 150 },
});