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

interface ChangePasswordFormProps {
    control: any;
    isActive?: boolean;
}

export const ChangePasswordForm = ({ control, isActive }: ChangePasswordFormProps) => {
    return (
        <View style={{width: '100%', marginTop: 20, gap: 20}}>
            <Controller
                name="oldPassword"
                control={control}
                render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
                    <CustomTextInput
                        onBlur={onBlur}
                        value={value ?? ""}
                        label="Old password"
                        errors={error?.message}
                        editable={isActive}
                        isPassword
                        textInputProps={{
                            onChangeText: onChange,
                        }}
                    />
                )}
            />
            <Controller
                name="newPassword"
                control={control}
                render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
                    <CustomTextInput
                        onBlur={onBlur}
                        value={value ?? ""}
                        label="New password"
                        isPassword
                        errors={error?.message}
                        editable={isActive}
                        textInputProps={{
                            onChangeText: onChange,
                        }}
                    />
                )}
            />
            <Controller
                name="confirmPassword"
                control={control}
                render={({ field: { onChange, onBlur, value }, fieldState: { error } }) => (
                    <CustomTextInput
                        onBlur={onBlur}
                        value={value ?? ""}
                        label="Confirm password"
                        isPassword
                        errors={error?.message}
                        editable={isActive}
                        textInputProps={{
                            onChangeText: onChange,
                        }}
                    />
                )}
            />
        </View>
    );
}