import React from 'react'
import { ParticipantsGridView } from '../ParticipantsGridView'
import { ParticipantsSpeakerView } from '../ParticipantsSpeakerView'
import { useZocksStore } from '../../../app'
import { ParticipantsViewType, selectCurrentParticipantsView, selectIsScreenSharing } from '../../../store'
import { ParticipantsScreenShareView } from '../ParticipantsScreenShareView'
import { ParticipantAudio } from '../ParticipantAudio'
import { ParticipantsProps } from '../model'
import { Participant } from '../../Participant'
import { ScreenShare } from '../../ScreenShare'
import { getClassName, getMergedClassNames } from '../../common'
import zocksStyle from './Participants.module.scss'

export const Participants: React.FC<ParticipantsProps> = ({
  gridPageSize = 25,
  speakerPageSize = 4,
  screenSharePageSize = 4,
  components,
  styles,
}) => {
  const isScreenSharing = useZocksStore(selectIsScreenSharing)
  const currentView = useZocksStore(selectCurrentParticipantsView)

  const ParticipantElement = components?.Participant ?? Participant
  const ScreenShareElement = components?.ScreenShare ?? ScreenShare
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  const getCurrentView = () => {
    switch (true) {
      case isScreenSharing:
        return (
          <ParticipantsScreenShareView
            pageSize={screenSharePageSize}
            components={{ Participant: ParticipantElement, ScreenShare: ScreenShareElement }}
            styles={mergedStyles}
          />
        )
      case currentView === ParticipantsViewType.Grid:
        return <ParticipantsGridView pageSize={gridPageSize} components={{ Participant: ParticipantElement }} />
      case currentView === ParticipantsViewType.Speaker:
        return <ParticipantsSpeakerView pageSize={speakerPageSize} components={{ Participant: ParticipantElement }} />
    }
  }

  return (
    <div className={getClassName('participants', mergedStyles)}>
      {getCurrentView()}
      <ParticipantAudio />
    </div>
  )
}
