utils.debug.ts

import { useRef } from 'react'

/**
 * Debugging helper to log changes in dependencies of a hook.
 * Just copy the dependency array and pass it as an object. e.g.:
 *
 * useLogDepsChange({ dep1, dep2, dep3 }, 'Debug Name')
 * useEffect(() => {
 *   ...
 * }, [dep1, dep2, dep3])
 *
 * @param depsObj
 * @param logName optional to identify the log source
 */
export const useLogDepsChange = <T extends Record<string, unknown>>(
  depsObj: T,
  logName?: string
) => {
  const prevRef = useRef<Record<string, unknown> | null>(null)
  const prev = prevRef.current
  const entries = Object.entries(depsObj)

  if (!prev) {
    prevRef.current = Object.fromEntries(entries)
    return
  }

  const changed: Array<{ key: string; previous: unknown; current: unknown }> = []

  entries.forEach(([key, val]) => {
    const prevVal = (prev as Record<string, unknown>)[key]
    if (!Object.is(prevVal, val)) {
      changed.push({ key, previous: prevVal, current: val })
    }
  })

  if (changed.length > 0) {
    console.debug(
      logName ? `${getTime()} ${logName} - deps changed` : 'deps changed',
      changed.reduce(
        (acc, { key, previous, current }) => {
          acc[key] = { previous, current }
          return acc
        },
        {} as Record<string, { previous: unknown; current: unknown }>
      )
    )
  }

  prevRef.current = Object.fromEntries(entries)
}

function getTime() {
  const date = new Date()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  const milliseconds = date.getMilliseconds()

  // Pad with leading zeros for two-digit minutes and seconds
  const formattedMinutes = String(minutes).padStart(2, '0')
  const formattedSeconds = String(seconds).padStart(2, '0')

  // Pad with leading zeros for three-digit milliseconds
  const formattedMilliseconds = String(milliseconds).padStart(3, '0')

  return `${formattedMinutes}m:${formattedSeconds}s:${formattedMilliseconds}ms`
}