"use client";

import { createElements } from "@/lib/tcmd";
import Link from "next/link";
import React, { FC, 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(renderBlock)}
    </div>
  );
};

const renderBlock = (block: BlockChildren): ReactNode => {
  switch (block.type) {
    case "block":
      return block.children.map(renderBlock);
    case "grid":
      return (
        <div
          style={{
            "--grid-cols": block.metadata.columns,
          } as React.CSSProperties}
          className="grid grid-cols-dynamic gap-x-8 gap-y-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(renderBlock)}</div>;
    default:
      return (
        renderParagraph(block as ParagraphToken)
      );
  }
};

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

const renderToken = (t: Token) => {
  switch (t.type) {
    case "h1":
      return (
        <p className="font-bold text-2xl">
          {renderInlineToken(t.line)}
        </p>
      );
    case "h2":
      return (
        <p className="font-bold text-xl">
          {renderInlineToken(t.line)}
        </p>
      );
    case "h3":
      return (
        <p className="font-bold text-lg">
          {renderInlineToken(t.line)}
        </p>
      );
    case "p":
      return (
        <p>
          {t.lines.map(renderToken)}
        </p>
      );
    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 (
        <p className="text-white bg-red-500">
          Missing implementation for tcMD element `{(t as { type: string })
            .type}`
        </p>
      );
  }
};

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

  return l.map((token) => {
    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>
        );
      default:
        return (
          <span className="bg-red-500">
            Inline element not implemented: {token.type}
          </span>
        );
    }
  });
};
