import { Control, Controller, FieldValues } from "react-hook-form";
import { ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { CustomTextInput } from "../text_input/text_input";
import { LIGTHT_THEME } from "../../constants/theme";
import { LoginFormValues } from "../../hooks/useLoggin";
import { OrDivision } from "../or_division/or_division";
import { LANG } from "../../lang/translations";

interface LoginFormProps {
    control: Control<LoginFormValues, any>;
    onSubmit: () => void;
}

export const LoginForm = ({ control, onSubmit }: LoginFormProps) => {
    return (
        <ScrollView contentContainerStyle={styles.loginScroll}>
          <Text style={styles.title}>{LANG.t('loginScreen.title')}</Text>
          <View style={{ height: 40 }} />
          <Controller
            name="email"
            control={control}
            defaultValue=""
            render={({
              field: { onChange, onBlur, value },
              formState: { errors },
            }) => (
              <CustomTextInput
                label={LANG.t('forms.email')}
                value={value}
                onChangeText={onChange}
                onBlur={onBlur}
                errors={errors.email?.message as string}
              />
            )}
            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={LANG.t('forms.password')}
                isPassword
                value={value}
                onChangeText={onChange}
                onBlur={onBlur}
                errors={errors.password?.message as string}
              />
            )}
            rules={{ required: "Password is required" }}
          />
          <View style={{ height: "3%" }} />
          <TouchableOpacity onPress={onSubmit} style={styles.submitBtn}>
            <Text style={styles.submitBtnText}>{LANG.t('loginScreen.loginButton')}</Text>
          </TouchableOpacity>

          <OrDivision/>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    mainContainer: { 
      flex: 1, 
      backgroundColor: 
      LIGTHT_THEME.color.background 
    },
    imageContainer: {
      height: "40%",
      overflow: "hidden",
      borderBottomLeftRadius: 70,
      elevation: 5,
    },
    loginContainer: {
      marginHorizontal: 20,
      marginTop: "-30%",
      marginBottom: 20,
      elevation: 5,
      borderRadius: 10,
      backgroundColor: LIGTHT_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,
    },
  });