import React from 'react'
import classNames from 'classnames'
import {
  ActiveSpeakerParticipant,
  getClassName,
  getMergedClassNames,
  Participant,
  ScreenShare,
} from '../../../../components'
import { useZocksStore } from '../../../../app'
import { selectScreenSharingParticipant } from '../../../../store'
import { MainParticipantProps } from './models'
import zocksStyle from './MainParticipant.module.scss'

export const MainParticipant: React.FC<MainParticipantProps> = ({
  remoteParticipantExists,
  mainParticipant,
  noRemoteParticipantText = 'Waiting for the other participant to join.',
  components,
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  const screenSharingParticipant = useZocksStore(selectScreenSharingParticipant)

  const ParticipantElement = components?.Participant ?? Participant

  return (
    <>
      {screenSharingParticipant ? (
        <div className={getClassName('oneonone-main-participant__screen-share', mergedStyles)}>
          <ScreenShare participant={screenSharingParticipant} />
        </div>
      ) : (
        <div className={classNames(getClassName('oneonone-main-participant__container', mergedStyles))}>
          {remoteParticipantExists ? (
            <ActiveSpeakerParticipant
              styles={mergedStyles}
              mainParticipant={mainParticipant}
              components={{ Participant: ParticipantElement }}
            />
          ) : (
            <div className={getClassName('oneonone-main-participant--no-participant', mergedStyles)}>
              {noRemoteParticipantText}
            </div>
          )}
        </div>
      )}
    </>
  )
}
