import { TextInput } from "react-native";
import React, { useState } from "react";
import { Checkbox, Button, View, Text } 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 marginH-20>
      <TextInput placeholder="Email" value={email} onChangeText={setEmail} />
      <TextInput
        placeholder="Password"
        value={password}
        onChangeText={setPassword}
        secureTextEntry
      />
      <Button label="Register" onPress={handleSignUp} />
      <Text>Choose Profile Type:</Text>
      <Checkbox
        label="Parent"
        value={isParent}
        onValueChange={(value) => {
          setIsParent(value);
          setProfileType(ProfileType.PARENT);
          if (value) {
            setIsChild(false);
            setIsCaregiver(false);
          }
        }}
      />
      <Checkbox
        label="Child"
        value={isChild}
        onValueChange={(value) => {
          setIsChild(value);
          setProfileType(ProfileType.CHILD);
          if (value) {
            setIsParent(false);
            setIsCaregiver(false);
          }
        }}
      />
      <Checkbox
        label="Caregiver"
        value={isCaregiver}
        onValueChange={(value) => {
          setIsCaregiver(value);
          setProfileType(ProfileType.CAREGIVER);
          if (value) {
            setIsParent(false);
            setIsChild(false);
          }
        }}
      />
      <Text>
        Already have an account?
        <Button
          label="Sign In"
          margin-0
          link
          text200
          onPress={props.unsetRegister}
        />
      </Text>
    </View>
  );
};

export default SignUpPage;
