zammad/app/frontend/shared/entities/ticket/composables/useTicketLiveUsersDisplay.ts

// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/

import { ref, type Ref, watch } from 'vue'

import { useReactiveNow } from '#shared/composables/useReactiveNow.ts'

import type { TicketLiveAppUser } from '../types.ts'

// Default idle time from 5 minutes.
const IDLE_TIME_MS = 5 * 60 * 1000

export const useTicketLiveUsersDisplay = (
  liveUsers: Ref<TicketLiveAppUser[]>,
) => {
  const viewingUsers = ref<TicketLiveAppUser[]>([])
  const idleUsers = ref<TicketLiveAppUser[]>([])

  const reactiveNow = useReactiveNow()

  watch(
    [liveUsers, reactiveNow],
    () => {
      const localViewingUsers: TicketLiveAppUser[] = []
      const localIdleUsers: TicketLiveAppUser[] = []

      liveUsers.value.forEach((liveUser) => {
        if (
          new Date(liveUser.lastInteraction).getTime() + IDLE_TIME_MS <
          reactiveNow.value.getTime()
        ) {
          localIdleUsers.push(liveUser)
        } else {
          localViewingUsers.push(liveUser)
        }
      })

      viewingUsers.value = localViewingUsers
      idleUsers.value = localIdleUsers
    },
    { immediate: true },
  )

  return {
    viewingUsers,
    idleUsers,
  }
}