import { createGlobalState } from '@vueuse/core'

export const useApp = createGlobalState(() => {
  const mediasoup = useMediasoup()

  const inputMuted = ref(false)
  const outputMuted = ref(false)

  const me = computed(() => mediasoup.clients.value.find(client => client.isMe))

  function muteInput() {
    inputMuted.value = true
  }

  function unmuteInput() {
    inputMuted.value = false
  }

  function toggleInput() {
    if (inputMuted.value)
      unmuteInput()
    else
      muteInput()
  }

  function muteOutput() {
    outputMuted.value = true
  }

  function unmuteOutput() {
    outputMuted.value = false
  }

  function toggleOutput() {
    if (outputMuted.value)
      unmuteOutput()
    else
      muteOutput()
  }

  watch(inputMuted, async (state) => {
    if (state)
      await mediasoup.muteMic()
    else
      await mediasoup.unmuteMic()
  })

  return {
    clients: mediasoup.clients,
    me,
    inputMuted,
    muteInput,
    unmuteInput,
    toggleInput,
    outputMuted,
    muteOutput,
    unmuteOutput,
    toggleOutput,
  }
})