import React from "react";
import type { ComponentProps } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { FormField, InputText, Text } from "@jobber/components-native";

type FormFieldProps = ComponentProps<typeof FormField>;

export function FormFieldWithValidations(props: Partial<FormFieldProps>) {
  const methods = useForm({ mode: "onChange" });

  return (
    <FormProvider {...methods}>
      <FormField
        name={props.name ?? "validations"}
        validations={{
          maxLength: {
            value: 5,
            message: "Should not exceed 5 characters",
          },
        }}
        {...props}
      >
        {(field, error) => {
          return (
            <>
              {error && <Text variation="error">{error.message}</Text>}
              <InputText
                value={field.value}
                placeholder="Should not exceed 5 characters"
                onChangeText={field.onChange}
              />
            </>
          );
        }}
      </FormField>
    </FormProvider>
  );
}