import { BlockSpec } from "../components/StructuredContent";
import { renderHtml } from "../components/StructuredContent/html";
import getIframeSource from "./getIframeSource";
import getImageUrl, { Image as ImageType } from "./getImageUrl";

/* eslint-disable camelcase */
const blockMap = {
  heading: (node) => ({
    type: "heading",
    attrs: { level: 1 },
    content: [{ type: "text", text: node.text }],
  }),
  text: (node) => node.content,
  image: (node) => {
    const imageSource = node.image
      ? getImageUrl({ file: node.image } as ImageType)
      : getImageUrl(node);

    return { type: "image", attrs: { src: imageSource.uri } };
  },
  video: (node) => {
    const src = getIframeSource(node.url) || node.url;

    return { type: "video", attrs: { src } };
  },
  description_list: (node) => ({
    type: "description_list",
    content: node.content
      .map((item) => [
        {
          type: "description_title",
          content: [{ type: "text", text: item.title }],
        },
        { type: "description_data", content: item.content },
      ])
      .flat(),
  }),
};
/* eslint-enable camelcase */

const blocksToHTML = (blockContent: BlockSpec[]) => {
  if (!blockContent) return "";

  const content = [].concat(
    ...blockContent
      .map((block) => {
        const typeHandler = blockMap[block.type];
        if (!typeHandler) return content;

        return typeHandler(block);
      })
      .filter(Boolean)
  );

  return renderHtml(content);
};

export default blocksToHTML;