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

export const useDevices = createGlobalState(() => {
  const {
    ensurePermissions,
    permissionGranted,
    videoInputs,
    audioInputs,
    audioOutputs,
  } = useDevicesList()

  async function getShareStream(fps = 30) {
    return navigator.mediaDevices.getDisplayMedia({
      audio: false,
      video: {
        displaySurface: 'monitor',
        frameRate: { max: fps },
      },
    })
  }

  return {
    videoInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(videoInputs.value))),
    audioInputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioInputs.value))),
    audioOutputs: computed<MediaDeviceInfo[]>(() => JSON.parse(JSON.stringify(audioOutputs.value))),
    getShareStream,
  }
})