import { debounce } from 'lodash'
import { useEffect, useMemo, useRef } from 'react'
import { ConversationResource, MessageResource } from '../types'
import { useAppState } from './use_app_state'
import { useConversationsMarkRead } from './use_conversations_actions'

interface Props {
  conversation: ConversationResource
  messages: MessageResource[]
  enabled?: boolean
}

export function useMarkLatestMessageRead({ conversation, enabled = true }: Props) {
  const firedOnce = useRef<boolean>(false)
  const { markRead } = useConversationsMarkRead({ conversation })
  const debouncedMarkRead = useMemo(
    () => debounce(markRead, 1000, { leading: true, trailing: true }),
    [markRead]
  )
  const unreadCount = conversation.unreadCount
  const unreadReaction = conversation.unreadReaction

  const shouldMarkRead =
    !firedOnce.current || (enabled && Boolean(unreadCount >= 1 || unreadReaction))
  const appState = useAppState()
  const isActive = appState === 'active'

  useEffect(() => {
    if (!isActive || !shouldMarkRead) return

    firedOnce.current = true

    debouncedMarkRead(true)
  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReaction])
}