/* ==========================================================================
   SUCHE: eine Ergebnisseite über Wissensbasis, Forum und Kommentare.
   Jeder Treffer zeigt die Stelle, an der das Wort steht.
   ========================================================================== */

/** Die Fundstelle kommt fertig maskiert vom Server, nur die Marke ist HTML. */
function Snippet({ html }) {
  return <p className="snippet" dangerouslySetInnerHTML={{ __html: html }} />;
}

function HitRow({ post }) {
  return (
    <Link to={BB.postHref(post)} className={"hit" + (post.read ? " is-read" : "")}>
      <div className="hit-top">
        <KindBadge kind={post.kind} />
        <DraftMark post={post} />
        {post.author && <span className="hit-by">{post.author.displayName}</span>}
        <span className="grow" />
        <ReadMark read={post.read} label={false} />
      </div>
      <h3>{post.title}</h3>
      {(post.snippets || []).map((s, i) => <Snippet key={i} html={s} />)}
    </Link>
  );
}

function CommentHit({ hit }) {
  return (
    <Link
      to={BB.postHref({ collection: hit.postCollection, kind: hit.postKind, slug: hit.postSlug })}
      className="hit"
    >
      <div className="hit-top">
        <span className="kind k-article">{BB.t("Kommentar")}</span>
        <span className="hit-by">
          {BB.t("Im Kommentar von")} {hit.author.displayName}
        </span>
        <span className="grow" />
        <span className="hit-by">{BB.when(hit.createdAt)}</span>
      </div>
      <h3>{hit.postTitle}</h3>
      {(hit.snippets || []).map((s, i) => <Snippet key={i} html={s} />)}
    </Link>
  );
}

function HitGroup({ title, count, children }) {
  if (!count) return null;
  return (
    <section style={{ marginBottom: "3rem" }}>
      <div className="spread" style={{ marginBottom: "1rem", alignItems: "baseline" }}>
        <h3 style={{ fontSize: "var(--fs-h3)" }}>{title}</h3>
        <span className="label">{BB.num(count)} {BB.t("Treffer")}</span>
      </div>
      <div style={{ borderTop: "1px solid var(--line)" }}>{children}</div>
    </section>
  );
}

function SearchPage({ params }) {
  const { go } = useRouter();
  const q = params.get("q") || "";
  const [draft, setDraft] = useState(q);
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(!!q);

  useEffect(() => { setDraft(q); }, [q]);

  useEffect(() => {
    if (!q.trim()) { setData(null); setLoading(false); return; }
    let alive = true;
    setLoading(true);
    BB.get("/search" + BB.qs({ q: q.trim(), limit: 25 }))
      .then((d) => { if (alive) { setData(d); setLoading(false); } })
      .catch(() => { if (alive) { setData(null); setLoading(false); } });
    return () => { alive = false; };
  }, [q]);

  const total = data
    ? data.wiki.total + data.forum.total + data.comments.total
    : 0;

  return (
    <div className="wrap wrap-narrow section" style={{ paddingTop: "3rem" }}>
      <header className="section-head" style={{ marginBottom: "2rem" }}>
        <div className="eyebrow">{BB.t("Suchergebnisse")}</div>
        <h2>{q ? BB.t("Treffer für") + " „" + q + "“" : BB.t("Website durchsuchen")}</h2>
        <p className="lead">
          {BB.t("Titel, Aliase, Kurzbeschreibung und Fließtext werden durchsucht, Treffer im Titel stehen oben.")}
        </p>
        <form
          className="hdr-search"
          style={{ display: "block", maxWidth: 460, margin: "1.5rem 0 0" }}
          onSubmit={(e) => { e.preventDefault(); if (draft.trim()) go("/suche?q=" + encodeURIComponent(draft.trim())); }}
        >
          <span className="ico" aria-hidden="true">⌕</span>
          <input
            value={draft}
            autoFocus={!q}
            onChange={(e) => setDraft(e.target.value)}
            placeholder={BB.t("Suchen …")}
            aria-label={BB.t("Website durchsuchen")}
          />
        </form>
      </header>

      {!q.trim() ? (
        <Empty mark="⌕" title={BB.t("Es fehlt der Suchbegriff.")} />
      ) : loading ? (
        <Spinner />
      ) : total === 0 ? (
        <Empty mark="⌕" title={BB.t("Nichts gefunden")}>
          {BB.t("Nichts passt zu diesem Wort.")}
        </Empty>
      ) : (
        <>
          <HitGroup title={BB.t("Wissensbasis")} count={data.wiki.total}>
            {data.wiki.items.map((p) => <HitRow key={p.id} post={p} />)}
          </HitGroup>
          <HitGroup title={BB.t("Forum")} count={data.forum.total}>
            {data.forum.items.map((p) => <HitRow key={p.id} post={p} />)}
          </HitGroup>
          <HitGroup title={BB.t("Kommentare")} count={data.comments.total}>
            {data.comments.items.map((c) => <CommentHit key={c.id} hit={c} />)}
          </HitGroup>
        </>
      )}
    </div>
  );
}

Object.assign(window, { SearchPage });