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 { ProfileType } from "@/contexts/AuthContext";
import { Dimensions, 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 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 padding-15 marginT-30 height={Dimensions.get("window").height} flexG>
      <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}
      />
      <TextField
        ref={lnameRef}
        placeholder="Last name"
        value={lastName}
        onChangeText={setLastName}
        style={styles.textfield}
        onSubmitEditing={() => {
          emailRef.current?.focus();
        }}
        blurOnSubmit={false}
      />
      <TextField
        ref={emailRef}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={styles.textfield}
        onSubmitEditing={() => {
          passwordRef.current?.focus();
        }}
        blurOnSubmit={false}
      />
      <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 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 },
  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,
  },
});