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

export interface ParticipantPlayerProps {
  participantsState: any[],
  participant: {
    id: string,
    displayName: string,
    videoMediaStream: {
      video: any
    }
  },
}

export function ParticipantPlayer (props: ParticipantPlayerProps): JSX.Element {
  const sdkStateGlobal = useSdkStateGlobal()
  const [ videoInList, setVideoInList ] = useState('')

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

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

  return videoInList === '' && props.participant?.videoMediaStream?.video !== null ? <></> : (
    <VideoPlayer
      srcobject={props.participant?.videoMediaStream?.video}
      addstyle={{
        width: '100%'
      }}
      cssclass="cover"
    />
  )
}