// Renders the bundled docs (see markdown.ts) as React text nodes; nothing is parsed as HTML.
// Links to the other bundled doc switch docs, `#anchors` scroll, and web links open in the
// system browser.
import type { ReactNode } from 'react';
import { anchorOf, inlineTokens, parseMarkdown, resolveLink, type DocLink } from './markdown.ts';

function inline(text: string, onLink: (link: DocLink) => void, docs: readonly string[]): ReactNode[] {
  return inlineTokens(text).map((token, index) => {
    if (token.kind === 'text') return token.text;
    if (token.kind === 'code') return <code key={index}>{token.text}</code>;
    if (token.kind === 'bold') return <strong key={index}>{token.text}</strong>;
    const link = resolveLink(token.href, docs);
    return link
      ? <button key={index} type="button" className="bmk-doc-link" title={link.url ?? token.href} onClick={() => onLink(link)}>{inline(token.text, onLink, docs)}</button>
      : <span key={index}>{token.text}</span>;
  });
}

export function MarkdownDoc({ source, docs, onLink }: { source: string; docs: readonly string[]; onLink(link: DocLink): void }) {
  const blocks = parseMarkdown(source);
  return <div className="bmk-doc">{blocks.map((block, index) => {
    switch (block.kind) {
      case 'heading': {
        const Tag = `h${Math.min(block.level + 1, 5)}` as 'h2';
        return <Tag key={index} id={`doc-${anchorOf(block.text)}`}>{inline(block.text, onLink, docs)}</Tag>;
      }
      case 'paragraph': return <p key={index}>{inline(block.text, onLink, docs)}</p>;
      case 'list': {
        const List = block.ordered ? 'ol' : 'ul';
        return <List key={index}>{block.items.map((item, n) => <li key={n}>{inline(item, onLink, docs)}</li>)}</List>;
      }
      case 'table': return <div key={index} className="bmk-doc-table"><table>
        <thead><tr>{block.head.map((cell, n) => <th key={n}>{inline(cell, onLink, docs)}</th>)}</tr></thead>
        <tbody>{block.rows.map((row, r) => <tr key={r}>{row.map((cell, n) => <td key={n}>{inline(cell, onLink, docs)}</td>)}</tr>)}</tbody>
      </table></div>;
      case 'code': return <pre key={index} className="bt-snippet" data-lang={block.lang || undefined}>{block.text}</pre>;
    }
  })}</div>;
}