web/packages/common/tracking/useFormTracking.ts

"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import {
  type Control,
  type FieldValues,
  useFormState,
  type UseFromSubscribe,
} from "react-hook-form"

import {
  type FormType,
  trackFormAbandonment,
  trackFormCompletion,
  trackFormInputStarted,
} from "./form"

export function useFormTracking<T extends FieldValues>(
  formType: FormType,
  subscribe: UseFromSubscribe<T>,
  control: Control<T>,
  nameSuffix: string = ""
) {
  const [formStarted, setFormStarted] = useState(false)
  const lastAccessedField = useRef<string | undefined>(undefined)
  const formState = useFormState({ control })

  useEffect(() => {
    const unsubscribe = subscribe({
      formState: { dirtyFields: true },
      callback: (data) => {
        if ("name" in data) {
          lastAccessedField.current = data.name as string
        }

        if (!formStarted) {
          trackFormInputStarted(formType, nameSuffix)
          setFormStarted(true)
        }
      },
    })
    return () => unsubscribe()
  }, [subscribe, formType, nameSuffix, formStarted])

  useEffect(() => {
    if (!formStarted || !lastAccessedField.current || formState.isValid) return

    const lastField = lastAccessedField.current

    function handleBeforeUnload() {
      trackFormAbandonment(formType, lastField, nameSuffix)
    }

    function handleVisibilityChange() {
      if (document.visibilityState === "hidden") {
        trackFormAbandonment(formType, lastField, nameSuffix)
      }
    }

    window.addEventListener("beforeunload", handleBeforeUnload)
    window.addEventListener("visibilitychange", handleVisibilityChange)

    return () => {
      window.removeEventListener("beforeunload", handleBeforeUnload)
      window.removeEventListener("visibilitychange", handleVisibilityChange)
    }
  }, [formStarted, formType, nameSuffix, formState.isValid])

  const trackFormSubmit = useCallback(() => {
    if (formState.isValid) {
      trackFormCompletion(formType, nameSuffix)
    }
  }, [formType, nameSuffix, formState.isValid])

  return {
    trackFormSubmit,
  }
}