import React from 'react'
import { getClassName, getMergedClassNames } from '../../common'
import { ParticipantsListElementProps, ParticipantsListProps } from '../model'
import zocksStyle from '../ParticipantsList.module.scss'

export const ParticipantsList: React.FC<ParticipantsListProps> = ({ participants, dismiss, components, styles }) => {
  const ParticipantElement = components?.ParticipantListElement ?? SimpleParticipantsListElement
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('participants-list', mergedStyles)}>
      {dismiss && (
        <div className={getClassName('participants-list__dismiss-button', mergedStyles)}>
          <button onClick={dismiss} aria-label='Dismiss' />
        </div>
      )}
      <div className={getClassName('participants-list__participants-container', mergedStyles)}>
        {participants.map((participant) => {
          return <ParticipantElement key={participant.id} participant={participant} styles={styles} />
        })}
      </div>
    </div>
  )
}

export const SimpleParticipantsListElement: React.FC<ParticipantsListElementProps> = ({ participant, styles }) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)

  return (
    <div className={getClassName('participants-list__participant-container', mergedStyles)}>
      <div className={getClassName('participants-list__participant-avatar', mergedStyles)}>
        {participant.name?.slice(0, 1) || ''}
      </div>
      <div className={getClassName('participants-list__participant-name', mergedStyles)}>{participant.name}</div>
    </div>
  )
}
