import React from 'react'
import { PUBLIC_CHAT_RECIPIENT } from '../../../store'
import { getClassName, getMergedClassNames } from '../../common'
import { RecipientSelectorProps } from '../models'
import zocksStyle from './RecipientSelector.module.scss'

export const RecipientSelector: React.FC<RecipientSelectorProps> = ({
  remoteParticipants,
  onRecipientSelected,
  selectInfoText = 'To',
  allParticipantsLabel = 'Everyone',
  styles,
}) => {
  const mergedStyles = getMergedClassNames(zocksStyle, styles)
  return (
    <div className={getClassName('chat-input__recipient-select-container', mergedStyles)}>
      <div>{selectInfoText}</div>
      <select
        className={getClassName('chat-input__recipient-select', mergedStyles)}
        defaultValue={PUBLIC_CHAT_RECIPIENT}
        onChange={(evt) => onRecipientSelected(evt.target.value)}
      >
        <option value={PUBLIC_CHAT_RECIPIENT}>{allParticipantsLabel}</option>
        {remoteParticipants &&
          remoteParticipants
            .filter((p) => !!p.id)
            .map((p) => (
              <option key={p.id} value={p.id!}>
                {p.name}
              </option>
            ))}
      </select>
    </div>
  )
}
