import type { ChadClient, UpdatedClient } from '#shared/types'
import { createGlobalState } from '@vueuse/core'

export const useClients = createGlobalState(() => {
  const auth = useAuth()
  const signaling = useSignaling()
  const toast = useToast()

  const clients = shallowRef<ChadClient[]>([])

  const me = computed(() => clients.value.find(client => client.userId === auth.me.value?.id))

  watch(signaling.socket, (socket) => {
    if (!socket)
      return

    socket.on('clientChanged', (clientId: ChadClient['socketId'], updatedClient: UpdatedClient) => {
      const client = getClient(clientId)
      updateClient(clientId, updatedClient)

      if (client && client.displayName !== updatedClient.displayName)
        toast.add({ severity: 'info', summary: `${client.displayName} is now ${updatedClient.displayName}`, closable: false, life: 1000 })
    })

    socket.on('disconnect', () => {
      clients.value = []
    })
  })

  function getClient(clientId: ChadClient['socketId']) {
    return clients.value.find(client => client.socketId === clientId)
  }

  function addClient(...client: ChadClient[]) {
    clients.value.push(...client)

    triggerRef(clients)
  }

  function removeClient(clientId: ChadClient['socketId']) {
    clients.value = clients.value.filter(client => client.socketId !== clientId)
  }

  function updateClient(clientId: ChadClient['socketId'], updatedClient: UpdatedClient) {
    const clientIdx = clients.value.findIndex(client => client.socketId === clientId)

    if (clientIdx === -1)
      return

    clients.value[clientIdx] = {
      ...clients.value[clientIdx],
      ...updatedClient,
    } as ChadClient

    triggerRef(clients)
  }

  return {
    me,
    clients,
    getClient,
    addClient,
    removeClient,
    updateClient,
  }
})