import { createGlobalState, useDevicesList } from '@vueuse/core'

export const usePreferences = createGlobalState(() => {
  const inputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()
  const outputDeviceId = shallowRef<MediaDeviceInfo['deviceId']>()

  const {
    ensurePermissions,
    permissionGranted,
    videoInputs,
    audioInputs,
    audioOutputs,
  } = useDevicesList()

  return {
    inputDeviceId,
    outputDeviceId,
    videoInputs,
    audioInputs,
    audioOutputs,
  }
})