"use client"
import { useEffect } from "react"
import { useFormContext } from "react-hook-form"

export default function AutoFillDetector() {
  const {
    formState: { dirtyFields, isDirty, touchedFields },
    trigger,
    watch,
  } = useFormContext()

  useEffect(() => {
    const subscription = watch((_, field) => {
      if (field.name && dirtyFields[field.name] && !touchedFields[field.name]) {
        trigger(field.name)
      }
    })

    return () => subscription.unsubscribe()
  }, [dirtyFields, isDirty, touchedFields, trigger, watch])

  return null
}