import { useConfig } from 'domains/config/hooks'
import { useI18n } from 'domains/i18n/hooks'
import { className } from 'lib/css'
import { VNode } from 'preact'
import { useSeamlyParticipant } from 'ui/hooks/seamly-hooks'

const EventParticipant = ({ eventPayload }) => {
  const { t } = useI18n()
  const { fromClient, participant: participantId } = eventPayload
  const participant = useSeamlyParticipant(participantId) || {}
  const { messages } = useConfig()

  const participantName = fromClient
    ? t('participants.user.name')
    : participant && participant.name
  const { showAvatar, showName } =
    (messages && messages[fromClient ? 'user' : 'agent']) || {}

  if (!showAvatar && !showName) {
    return null
  }

  const authorInfo: VNode[] = []

  if (showAvatar && participantName && participant.avatar) {
    authorInfo.push(
      <span className={className('message__avatar')}>
        <img src={participant.avatar} className={className('avatar')} alt="" />
      </span>,
    )
  }

  if (showName && participantName) {
    authorInfo.push(
      <span className={className('message__author-name')}>
        {participantName}
      </span>,
    )
  }

  return authorInfo.length > 0 ? (
    <div className={className('message__author')}>{authorInfo}</div>
  ) : null
}

export default EventParticipant