import { zerteilen, type Spanne } from '../../../../shared/hervorhebung';
import type { RichText } from '../../../../shared/katalog';

export interface RichTextAnzeigeProps {
  readonly text: RichText;
  /**
   * `hervorhebung` betont ausgezeichnete Stellen im Fragewortlaut (meist
   * Verneinungen), `kernelement` zeigt die im amtlichen Katalog
   * unterstrichenen Stellen einer Musterantwort. Dieselbe Auszeichnung der
   * Quelle in zwei Rollen – was sie bedeutet, sagt das Amt nicht.
   */
  readonly art?: 'hervorhebung' | 'kernelement';
  /**
   * Fundstellen der Suche, in Zeichen des Ursprungstextes.
   *
   * Sie werden als `<mark className="fundstelle">` gezeigt und liegen auf
   * einer anderen Ebene als `art`: Die amtliche Auszeichnung gehört zum
   * Wortlaut, die Fundstelle zur Suche. Beide dürfen ineinanderliegen, ohne
   * einander zu überschreiben.
   */
  readonly fundstellen?: readonly Spanne[];
}

/**
 * Gibt amtlichen Text mit seinen Auszeichnungen wieder – Wortlaut unverändert.
 *
 * Die Auszeichnung ist nie die einzige Informationsquelle: die
 * unterstrichenen Stellen einer Musterantwort werden zusätzlich als Liste
 * geführt (WCAG 1.4.1), und eine Fundstelle der Suche steht zusätzlich im
 * Klartext an der Trefferkarte.
 */
export function RichTextAnzeige({
  text,
  art = 'hervorhebung',
  fundstellen,
}: RichTextAnzeigeProps): React.JSX.Element {
  if (fundstellen !== undefined && fundstellen.length > 0) {
    return (
      <>
        {zerteilen(text, fundstellen).map((stueck, stelle) => {
          const inhalt = stueck.hervorgehoben ? (
            art === 'kernelement' ? (
              <mark className="kernelement">{stueck.t}</mark>
            ) : (
              <strong>{stueck.t}</strong>
            )
          ) : (
            stueck.t
          );
          return stueck.treffer ? (
            <mark key={stelle} className="fundstelle">
              {inhalt}
            </mark>
          ) : (
            <span key={stelle}>{inhalt}</span>
          );
        })}
      </>
    );
  }

  if (text.segmente.length === 0) {
    return <>{text.text}</>;
  }

  return (
    <>
      {text.segmente.map((segment, stelle) => {
        if (segment.h !== true) {
          return <span key={stelle}>{segment.t}</span>;
        }
        return art === 'kernelement' ? (
          <mark key={stelle} className="kernelement">
            {segment.t}
          </mark>
        ) : (
          <strong key={stelle}>{segment.t}</strong>
        );
      })}
    </>
  );
}
