tabletop-commander/components/tcmd/index.tsx

"use client";

import { Accordion, AccordionContent } from "@/lib/accordion";
import { Poppable } from "@/lib/poppables/components/poppable";
import { createElements } from "@/lib/tcmd";
import { tokenizeInline } from "@/lib/tcmd/tokenizeInline";
import Link from "next/link";
import React, { FC, Fragment, ReactNode, use, useMemo } from "react";

export const TCMD: FC<{ body: Promise<string> }> = ({ body }) => {
  const text = use(body);
  const elements = useMemo(() => createElements(text), [text]);
  return (
    // <div className="grid grid-cols-2">
    //   <pre>{JSON.stringify(elements,null,2)}</pre>
    // </div>
    <div>
      {elements.map((e, i) => (
        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
      ))}
    </div>
  );
};

const renderBlock = (block: BlockChildren): ReactNode => {
  switch (block.type) {
    case "block":
      return block.children.map((e, i) => (
        <Fragment key={"tcmd-block" + i}>{renderBlock(e)}</Fragment>
      ));
    case "grid":
      return (
        <div
          style={{
            "--grid-cols": block.metadata.columns,
          } as React.CSSProperties}
          className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
        >
          {block.children.map((c, i) => (
            <div key={"block-grid" + c.type + i}>
              {renderBlock(c)}
            </div>
          ))}
        </div>
      );
    case "card":
      return (
        <div className="card">
          {block.children.map((e, i) => (
            <Fragment key={"card-block" + i + e.type}>
              {renderBlock(e)}
            </Fragment>
          ))}
        </div>
      );
    case "accordion":
      return (
        <Accordion
          title={block.metadata.title || "Expand"}
        >
          <AccordionContent>
            {block.children.map((e, i) => (
              <Fragment key={"accordion" + e.type + "i"}>
                {renderBlock(e)}
              </Fragment>
            ))}
          </AccordionContent>
        </Accordion>
      );
    default:
      return (
        renderParagraph(block as ParagraphToken)
      );
  }
};

const renderParagraph = (p: ParagraphToken) => {
  switch (p.type) {
    case "p":
      return (
        <div className="p">
          {p.content.map((e, i) => (
            <Fragment key={"p-paragraph" + i + e.type}>
              {renderToken(e)}
            </Fragment>
          ))}
        </div>
      );
    case "code":
      return (
        <pre className="whitespace-pre-wrap">
          {p.content.map((c) => c.line.toString()).join("\n\n")}
        </pre>
      );
    default:
      return (
        <div className="p bg-red-600 text-white">
          Block or paragraph missing implementation: {p.type}
        </div>
      );
  }
};

const renderToken = (t: Token) => {
  switch (t.type) {
    case "h1":
      return (
        <div
          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
            " ",
            "-",
          )}
          className="font-bold text-2xl p"
        >
          {renderInlineToken(t.line)}
        </div>
      );
    case "h2":
      return (
        <div
          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
            " ",
            "-",
          )}
          className="font-bold text-xl p"
        >
          {renderInlineToken(t.line)}
        </div>
      );
    case "h3":
      return (
        <div
          id={t.raw.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
            " ",
            "-",
          )}
          className="font-bold text-lg p"
        >
          {renderInlineToken(t.line)}
        </div>
      );
    case "p":
      return (
        <div className="p">
          {t.lines.map((e, i) => (
            <Fragment key={"p-line" + i + e.type}>
              {renderInlineToken(e.line)}
            </Fragment>
          ))}
        </div>
      );
    case "text":
      return (
        <>
          {renderInlineToken(t.line)}
          &nbsp;
        </>
      );
    case "list1":
      return <li className="list-disc ml-6">{renderInlineToken(t.line)}</li>;
    case "list2":
      return <li className="list-disc ml-8">{renderInlineToken(t.line)}</li>;
    default:
      return (
        <div className="text-white bg-red-500 p">
          Missing implementation for tcMD element `{(t as { type: string })
            .type}`
        </div>
      );
  }
};

const renderInlineToken = (l: Line) => {
  if (typeof l === "string") return l;

  return l.map((token) => (
    <Fragment key={"inline_token" + token.content}>
      {(() => {
        switch (token.type) {
          case "text":
            return <span>{token.content}</span>;
          case "bold":
            return <span className="font-bold">{token.content}</span>;
          case "anchor":
            return (
              <Link className="text-primary-600" href={token.data.href}>
                {token.content}
              </Link>
            );
          case "image":
            // eslint-disable-next-line @next/next/no-img-element
            return <img src={token.data.src} alt={token.content} />;
          case "popover":
            return (
              <Poppable
                content={renderInlineToken(token.data.popover)}
                preferredAlign="centered"
                preferredEdge="bottom"
                className="cursor-pointer"
              >
                <span className="border-b border-dotted border-white">
                  {token.content}
                </span>
              </Poppable>
            );
          default:
            return (
              <span className="bg-red-500">
                Inline element not implemented: {token.type}
              </span>
            );
        }
      })()}
    </Fragment>
  ));
};