import { Control, Controller, useForm } from "react-hook-form";
import {
  Button,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { CustomTextInput } from "../../common/components/form/text_input";
import { LIGHT_THEME } from "../../common/const/theme";
import { useLoggin } from "../hooks/useLoggin";
import { OrDivision } from "../../common/components/form/or_division";
import { SignUpFormValues, useSignUp } from "../hooks/useSignUp";
import { DateTextInput } from "../../common/components/form/date_text_input";
import { router } from "expo-router";

interface SignUpFormProps {
  control: Control<SignUpFormValues, any>;
  onSubmit: () => Promise<void>;
}

export const SignUpForm = ({ control, onSubmit }: SignUpFormProps) => {
  return (
    <ScrollView contentContainerStyle={styles.loginScroll}>
      <Text style={styles.title}>Sign Up</Text>
      <View style={{ height: 40 }} />
      <Controller
        name="name"
        control={control}
        defaultValue=""
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            label="Name"
            value={value}
            onBlur={onBlur}
            errors={errors.name?.message as string}
            textInputProps={{
              autoComplete: "name",
              autoCapitalize: "words",
              onChangeText: onChange,
            }}
          />
        )}
        rules={{
          required: "Name is required",
        }}
      />
      <Controller
        name="lastName"
        control={control}
        defaultValue=""
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            label="Last Name"
            value={value}
            onBlur={onBlur}
            errors={errors.lastName?.message as string}
            textInputProps={{
              autoComplete: "name",
              autoCapitalize: "words",
              onChangeText: onChange,
            }}
          />
        )}
        rules={{
          required: "Last name is required",
        }}
      />
      <Controller
        name="email"
        control={control}
        defaultValue=""
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            label="Email"
            onBlur={onBlur}
            value={value}
            errors={errors.email?.message as string}
            textInputProps={{
              autoComplete: "email",
              keyboardType: "email-address",
              autoCapitalize: "none",
              onChangeText: onChange,
            }}
          />
        )}
        rules={{
          required: "Email is required",
          pattern: { value: /\S+@\S+\.\S+/, message: "Invalid email" },
        }}
        
      />
      <Controller
        name="password"
        control={control}
        defaultValue=""
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            label="Password"
            isPassword
            value={value}
            onBlur={onBlur}
            errors={errors.password?.message as string}
            textInputProps={
              {
                autoComplete: "password",
                autoCapitalize: "none",
                onChangeText: onChange,
            }
          }
          />
        )}
        rules={{ required: "Password is required" }}
      />
      <Controller
        name="confirmPassword"
        control={control}
        defaultValue=""
        render={({
          field: { onChange, onBlur, value },
          formState: { errors },
        }) => (
          <CustomTextInput
            label="Confirm Password"
            isPassword
            value={value}
            onBlur={onBlur}
            errors={errors.confirmPassword?.message as string}
            textInputProps={{
              autoCapitalize: "none",
              onChangeText: onChange,
            }}
          />
        )}
        rules={{ required: "Confirm password is required" }}
      />
      <Controller
        control={control}
        name="dateOfBirth"
        render={({ field: { onChange, value } }) => (
          <DateTextInput
            label="Date of Birth"
            value={value}
            onChangeText={onChange}
          />
        )}
        defaultValue=" "

      />
      <View style={{ height: "3%" }} />
      <TouchableOpacity style={styles.submitBtn} onPress={onSubmit}>
        <Text style={styles.submitBtnText}>Sign Up</Text>
      </TouchableOpacity>

      <OrDivision/>

      <Button title="Login" onPress={() => router.replace('/login')}/>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: LIGHT_THEME.color.background,
  },
  imageContainer: {
    height: "40%",
    overflow: "hidden",
    borderBottomLeftRadius: 70,
    elevation: 5,
  },
  loginContainer: {
    marginHorizontal: 20,
    marginTop: "-30%",
    marginBottom: 20,
    elevation: 5,
    borderRadius: 10,
    backgroundColor: LIGHT_THEME.color.white,
    height: "70%",
  },
  loginScroll: {
    padding: 20,
    gap: 10,
    justifyContent: "center",
  },
  title: { fontSize: 30, fontWeight: "bold", alignSelf: "center" },
  submitBtn: {
    backgroundColor: "black",
    borderRadius: 5,
    width: "100%",
    padding: 10,
    justifyContent: "center",
    alignItems: "center",
  },
  submitBtnText: {
    color: "white",
    fontSize: 20,
  },
});
