import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

const userFormSchema = z.object({
  username: z.string()
    .min(3, 'Username must be at least 3 characters')
    .max(20, 'Username cannot exceed 20 characters'),
  email: z.string()
    .email('Please enter a valid email'),
  age: z.number()
    .min(18, 'Must be at least 18 years old')
    .max(100, 'Age cannot exceed 100'),
  interests: z.array(z.string())
    .min(1, 'Select at least one interest')
});

type UserFormData = z.infer<typeof userFormSchema>;

const DynamicForm = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm<UserFormData>({
    resolver: zodResolver(userFormSchema),
    defaultValues: {
      interests: [],
    },
  });

  const onSubmit = (data: UserFormData) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <input
          {...register('username')}
          placeholder="Username"
          className="form-input"
        />
        {errors.username && (
          <span className="text-red-500">{errors.username.message}</span>
        )}
      </div>

      <div>
        <input
          {...register('email')}
          placeholder="Email"
          className="form-input"
        />
        {errors.email && (
          <span className="text-red-500">{errors.email.message}</span>
        )}
      </div>

      <div>
        <input
          {...register('age', { valueAsNumber: true })}
          type="number"
          placeholder="Age"
          className="form-input"
        />
        {errors.age && (
          <span className="text-red-500">{errors.age.message}</span>
        )}
      </div>

      <button type="submit" className="btn-primary">
        Submit
      </button>
    </form>
  );
};

const { fields, append, remove } = useFieldArray({
  name: 'interests',
  control,
});

const watchUsername = watch('username');

const FormProvider = useFormContext();