import type {Peer} from '../types'
import {shortId} from '../util'

type Props = {
  others: Peer[]
  target: string | null
  onSelectTarget: (target: string | null) => void
}

export function PeerList({others, target, onSelectTarget}: Props) {
  return (
    <div className="panel">
      <h2 className="panel-title">Send messages to</h2>

      <ul className="peer-list">
        <li>
          <button
            className={`peer broadcast ${target === null ? 'selected' : ''}`}
            onClick={() => onSelectTarget(null)}
          >
            <span className="peer-avatar">📣</span>
            <span className="peer-name">Everyone</span>
            <span className="peer-sub">broadcast to all peers</span>
          </button>
        </li>

        {others.map(p => (
          <li key={p.id}>
            <button
              className={`peer ${target === p.id ? 'selected' : ''}`}
              onClick={() => onSelectTarget(p.id)}
              title={p.id}
            >
              <span className="peer-avatar">{initials(p.name)}</span>
              <span className="peer-name">{p.name}</span>
              <span className="peer-sub">
                <code>{shortId(p.id)}</code>
              </span>
            </button>
          </li>
        ))}
      </ul>

      {others.length === 0 && (
        <p className="empty">
          No other peers yet. Open this page in a second browser tab (or send the
          URL to a friend) and they'll show up here.
        </p>
      )}
    </div>
  )
}

function initials(name: string): string {
  const cleaned = name.replace(/[()]/g, '').trim()
  return cleaned.slice(0, 2).toUpperCase() || '??'
}