import React from 'react'
import { getClassName, getMergedClassNames, Participant } from '../../../../components'
import { useZocksStore } from '../../../../app'
import { selectLocalParticipant, selectScreenSharingParticipant } from '../../../../store'
import { FloatingParticipantProps } from './models'
import zocksStyle from './FloatingParticipant.module.scss'

export const FloatingParticipant: React.FC<FloatingParticipantProps> = ({ styles, mainParticipant, components }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  const screenSharingParticipant = useZocksStore(selectScreenSharingParticipant)
  const localParticipant = useZocksStore(selectLocalParticipant)

  const ParticipantElement = components?.Participant ?? Participant

  return (
    <div className={getClassName('floating-participant__container', mergedStyles)}>
      <ParticipantElement
        styles={mergedStyles}
        participant={screenSharingParticipant ? mainParticipant : localParticipant}
      />
    </div>
  )
}
