import React from 'react';

const NBSP = String.fromCharCode(160);

const CorrespondentLinks = ({
  correspondents,
  activeCorrespondentIdSet,
  onCorrespondentClick,
}) => {
  if (!Array.isArray(correspondents) || correspondents.length === 0) {
    return null;
  }

  const activeSet = activeCorrespondentIdSet || new Set();
  const handleClick = (event, correspondent) => {
    if (!onCorrespondentClick || correspondent.id == null) {
      return;
    }
    event.stopPropagation();
    onCorrespondentClick(correspondent.id);
  };

  return correspondents.map((correspondent, index) => {
    const isActive = correspondent.id != null && activeSet.has(correspondent.id);
    const hasHandler = Boolean(onCorrespondentClick) && correspondent.id != null;
    const classNames = ['doc-correspondent-link'];
    if (isActive) classNames.push('is-active');
    if (!hasHandler) classNames.push('is-static');
    const isLast = index === correspondents.length - 1;
    const label = isLast ? `${correspondent.name}:${NBSP}` : correspondent.name;

    return (
      <React.Fragment
        key={correspondent.key ?? correspondent.id ?? `${correspondent.name}-${index}`}
      >
        <button
          type="button"
          className={classNames.join(' ')}
          aria-disabled={hasHandler ? undefined : true}
          onClick={(event) => handleClick(event, correspondent)}
          onKeyDown={(event) => {
            if (!hasHandler) {
              return;
            }
            if (event.key === 'Enter' || event.key === ' ') {
              event.preventDefault();
              event.stopPropagation();
              handleClick(event, correspondent);
            }
          }}
        >
          {label}
        </button>
        {isLast ? null : <span className="doc-correspondent-link__separator">, </span>}
      </React.Fragment>
    );
  });
};

export default CorrespondentLinks;