import { View, StyleSheet } from "react-native";
import { CustomTextInput } from "../../common/components/form/text_input";
import { Control, Controller } from "react-hook-form";
import { ResetPasswordFormValues } from "../pages/reset_password_page";

interface PasswordFormProps {
  control: Control<ResetPasswordFormValues, any>;
}

export const PasswordForm = ({ control }: PasswordFormProps) => {
  return (
    <View style={styles.mainContainer}>
      <Controller
        control={control}
        name="newPassword"
        render={({ field: { onChange, onBlur, value }, formState: {errors} }) => (
          <CustomTextInput
            isPassword
            onBlur={onBlur}
            value={value}
            label="Password"
            errors={errors.newPassword?.message}
            textInputProps={{
              onChangeText: (value) => onChange(value),
            }}
          />
        )}
      />
      <Controller
        control={control}
        name="newPasswordConfirmation"
        render={({ field: { onChange, onBlur, value }, formState: {errors} }) => (
          <CustomTextInput
            isPassword
            onBlur={onBlur}
            value={value}
            errors={errors.newPasswordConfirmation?.message}
            label="Password Confirmation"
            textInputProps={{
              onChangeText: (value) => onChange(value),
            }}
          />
        )}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    width: "100%",
  },
});
