import { RED } from "../theme";

/*
 * De stuurtekens waarmee de server de gevonden woorden inpakt (ts_headline; zie server/queries.js).
 * Ze staan hier apart zodat beide kanten dezelfde afspraak lezen.
 */
const START = "\u0001";
const STOP = "\u0002";

/*
 * Tekst met gemarkeerde treffers → React. Het markeren gebeurt op de server, niet hier: die weet
 * wélk woord de treffer was. Dat scheelt: de zoekopdracht gaat door de Nederlandse stemming heen,
 * dus wie 'boek' zoekt vindt 'boeken' — en krijgt dat woord ook onderstreept.
 *
 * Subtiel met opzet: een rode streep onder het woord, geen gekleurd blok. Je moet een brief kunnen
 * blijven lezen terwijl je ziet waar het woord staat. Tekst zonder markering gaat ongewijzigd terug,
 * dus dit is veilig aan te roepen op elke brief.
 */
export function marked(text) {
  if (typeof text !== "string" || !text.includes(START)) return text;
  return text.split(START).flatMap((chunk, i) => {
    if (i === 0) return chunk;
    const stop = chunk.indexOf(STOP);
    if (stop < 0) return chunk; // ongepaard: laat staan in plaats van tekst te verliezen
    return [
      <mark
        key={i}
        style={{
          background: "none",
          color: "inherit",
          textDecoration: "underline",
          textDecorationColor: RED,
          textDecorationThickness: 2,
          textUnderlineOffset: 3,
        }}
      >
        {chunk.slice(0, stop)}
      </mark>,
      chunk.slice(stop + STOP.length),
    ];
  });
}