platform-codebase/@packages/@hooks/messaging-hooks/src/hooks/useTyping.ts

/**
 * useTyping Hook
 *
 * Manages typing indicators with debouncing
 */

import { useState, useCallback, useRef, useEffect } from 'react'

import type { TypingIndicator, SocketClient, TypingSocketEvents } from '../types'

export interface UseTypingOptions {
  debounceMs?: number
  socket?: SocketClient<TypingSocketEvents['emit'], TypingSocketEvents['listen']>
}

/**
 * Hook to manage typing indicators with automatic debouncing
 */
export function useTyping(roomId: string, options: UseTypingOptions = {}) {
  const { debounceMs = 500, socket } = options
  const [typing, setTyping] = useState<TypingIndicator[]>([])
  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
  const isTypingRef = useRef(false)

  /**
   * Set local user typing state (debounced)
   */
  const setLocalTyping = useCallback(
    (isTyping: boolean) => {
      // Clear existing timer
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current)
        debounceTimerRef.current = null
      }

      if (isTyping) {
        // Immediately send typing=true
        if (socket && !isTypingRef.current) {
          socket.emit('chat:typing', { roomId, typing: true })
          isTypingRef.current = true
        }

        // Set timer to send typing=false after debounce period
        debounceTimerRef.current = setTimeout(() => {
          if (socket && isTypingRef.current) {
            socket.emit('chat:typing', { roomId, typing: false })
            isTypingRef.current = false
          }
        }, debounceMs)
      } else {
        // Immediately send typing=false
        if (socket && isTypingRef.current) {
          socket.emit('chat:typing', { roomId, typing: false })
          isTypingRef.current = false
        }
      }
    },
    [roomId, socket, debounceMs],
  )

  /**
   * Listen for typing events from other users
   */
  useEffect(() => {
    if (!socket) {return}

    const handleTyping = (data: { userId: string; typing: boolean }) => {
      setTyping((prev: TypingIndicator[]) => {
        if (data.typing) {
          // Add user to typing list if not already there
          if (!prev.some((t: TypingIndicator) => t.userId === data.userId)) {
            return [...prev, { userId: data.userId, roomId, typing: true }]
          }
          return prev
        } else {
          // Remove user from typing list
          return prev.filter((t: TypingIndicator) => t.userId !== data.userId)
        }
      })
    }

    socket.on('chat:typing', handleTyping)

    return () => {
      socket.off('chat:typing', handleTyping)

      // Clear timer on unmount
      if (debounceTimerRef.current) {
        clearTimeout(debounceTimerRef.current)
      }

      // Send typing=false on unmount
      if (isTypingRef.current) {
        socket.emit('chat:typing', { roomId, typing: false })
      }
    }
  }, [socket, roomId])

  return {
    typing,
    setTyping: setLocalTyping,
    isTyping: typing.length > 0,
  }
}