import React, {useEffect, useState} from 'react'
import AudioPlayer from './AudioPlayer'
import {useSdkStateGlobal} from '@/contexts/SdkStateGlobal'

export interface ParticipantPlayerProps {
  participantsState: any[],
  participant: {
    id: string,
    displayName: string,
    audioMediaStream: {
      audio: any
    }
  },
}

export function ParticipantAudio (props: ParticipantPlayerProps): JSX.Element {
  const sdkStateGlobal = useSdkStateGlobal()
  const [ audioInList, setAudioInList ] = useState('')

  useEffect(() => {
    setAudioInList(() => {
      const audioList = sdkStateGlobal.publisherAudios.split(',')
      const idx = audioList.findIndex((i: any) => `${props?.participant?.id}` === i)

      if (idx > -1) {
        return props?.participant?.id
      } else {
        return ''
      }
    })
  }, [sdkStateGlobal.publisherAudios]);

  return audioInList === '' && props.participant?.audioMediaStream?.audio ? <></> : (
    <AudioPlayer
      srcobject={props.participant?.audioMediaStream?.audio}
      volume={1}
    />
  )
}