import React from 'react'
import classNames from 'classnames'
import {
  getClassName,
  getMergedClassNames,
  Participant,
  useSortRemoteParticipantsBySpeakers,
} from '../../../components'
import { useZocksSession } from '../../../store'
import { OneOnOneParticipantViewProps } from './models'
import { FloatingParticipant } from './FloatingParticipant'
import { MainParticipant } from './MainParticipant'
import zocksStyle from './OneOnOneParticipantView.module.scss'

export const OneOnOneParticipantView: React.FC<OneOnOneParticipantViewProps> = ({ styles, components }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  const { remoteParticipantsSortedBySpeakers } = useSortRemoteParticipantsBySpeakers()
  const { localParticipant } = useZocksSession()
  const remoteParticipantsExist = !!remoteParticipantsSortedBySpeakers.length

  const mainParticipant = remoteParticipantsExist ? remoteParticipantsSortedBySpeakers[0] : localParticipant

  const FloatingParticipantElement = components?.FloatingParticipant ?? Participant
  const RemoteParticipantElement = components?.MainParticipant ?? Participant

  return (
    <div className={classNames(getClassName('oneonone-participant-view__container', mergedStyles))}>
      <div className={classNames(getClassName('oneonone-participant-view__main_participant', mergedStyles))}>
        <MainParticipant
          styles={mergedStyles}
          remoteParticipantExists={remoteParticipantsExist}
          mainParticipant={mainParticipant}
          components={{ Participant: RemoteParticipantElement }}
        />
      </div>
      <div className={getClassName('oneonone-participant-view__floating-participant', mergedStyles)}>
        <FloatingParticipant
          styles={mergedStyles}
          mainParticipant={mainParticipant}
          components={{ Participant: FloatingParticipantElement }}
        />
      </div>
    </div>
  )
}
