import { StructuredText } from "react-datocms";
import { renderNodeRule } from "react-datocms";
import type {
  Document,
  Record,
  Root,
  StructuredText as StructuredTextType,
} from "datocms-structured-text-utils";
import { isCode } from "datocms-structured-text-utils";

import DatoBlock from "@/components/block";
import CodeNode from "@/components/code";
import type { Block, ModularContent, StructuredContent } from "@/types";

export function transformStructuredText<
  R1 extends Record,
  R2 extends Record = R1,
>(data?: StructuredContent | null): StructuredTextType<R1, R2> | null {
  if (!data || data.value === null || data.value === undefined) {
    return null;
  }

  const value: Document = {
    schema: "dast",
    document: (data.value as Document).document as Root,
  };

  const blocks = data.blocks as R1[];
  const links = data.links as R2[];

  return { blocks, value, links };
}

interface DatoContentProps {
  structured?: StructuredContent | null;
  modular?: ModularContent | null;
}

export default function DatoContent({ modular, structured }: DatoContentProps) {
  //console.log( structured, modular );
  const structuredText = transformStructuredText(structured);

  const structuredContent = structuredText ? (
    <StructuredText
      data={structuredText}
      renderBlock={({ record }) => <DatoBlock block={record as Block} />}
      customNodeRules={[
        renderNodeRule(isCode, ({ node, key }) => (
          <CodeNode
            key={key}
            code={node.code}
            language={node.language}
            linesToBeHighlighted={node.highlight}
          />
        )),
      ]}
    />
  ) : null;

  const modularContent = modular
    ? modular.map((block) => (
        <DatoBlock
          key={`block-${block?.type || ""}-${block.id}`}
          block={block}
        />
      ))
    : null;

  return (
    <>
      {structuredContent}
      {modularContent}
    </>
  );
}