import { Node, parse, renderers, transform } from '@markdoc/markdoc';
import { DocumentData } from '@nrwl/nx-dev/models-document';
import React, { ReactNode } from 'react';
import { Fence } from './lib/nodes/fence.component';
import { fence } from './lib/nodes/fence.schema';
import { Heading } from './lib/nodes/heading.component';
import { heading } from './lib/nodes/heading.schema';
import { getImageSchema } from './lib/nodes/image.schema';
import { CustomLink } from './lib/nodes/link.component';
import { link } from './lib/nodes/link.schema';
import { Callout } from './lib/tags/callout.component';
import { callout } from './lib/tags/callout.schema';
import { Card, Cards } from './lib/tags/cards.component';
import { card, cards } from './lib/tags/cards.schema';
import { GithubRepository } from './lib/tags/github-repository.component';
import { githubRepository } from './lib/tags/github-repository.schema';
import { Graph } from './lib/tags/graph.component';
import { graph } from './lib/tags/graph.schema';
import { Iframe } from './lib/tags/iframe.component';
import { iframe } from './lib/tags/iframe.schema';
import { NxCloudSection } from './lib/tags/nx-cloud-section.component';
import { nxCloudSection } from './lib/tags/nx-cloud-section.schema';
import { InstallNxConsole } from './lib/tags/install-nx-console.component';
import { installNxConsole } from './lib/tags/install-nx-console.schema';
import { Persona, Personas } from './lib/tags/personas.component';
import { persona, personas } from './lib/tags/personas.schema';
import { SideBySide } from './lib/tags/side-by-side.component';
import { sideBySide } from './lib/tags/side-by-side.schema';
import { Tab, Tabs } from './lib/tags/tabs.component';
import { tab, tabs } from './lib/tags/tabs.schema';
import { YouTube } from './lib/tags/youtube.components';
import { youtube } from './lib/tags/youtube.schema';

export const getMarkdocCustomConfig = (
  document: DocumentData
): { config: any; components: any } => ({
  config: {
    nodes: {
      fence,
      heading,
      image: getImageSchema(document),
      link,
    },
    tags: {
      callout,
      card,
      cards,
      'github-repository': githubRepository,
      graph,
      iframe,
      'install-nx-console': installNxConsole,
      'nx-cloud-section': nxCloudSection,
      persona,
      personas,
      'side-by-side': sideBySide,
      tab,
      tabs,
      youtube,
    },
  },
  components: {
    Callout,
    Card,
    Cards,
    CustomLink,
    Fence,
    GithubRepository,
    Graph,
    Heading,
    Iframe,
    InstallNxConsole,
    NxCloudSection,
    Persona,
    Personas,
    SideBySide,
    Tab,
    Tabs,
    YouTube,
  },
});

export const parseMarkdown: (markdown: string) => Node = (markdown) =>
  parse(markdown);

export const renderMarkdown: (document: DocumentData) => ReactNode = (
  document: DocumentData
): ReactNode => {
  const ast = parseMarkdown(document.content.toString());
  const configuration = getMarkdocCustomConfig(document);
  return renderers.react(transform(ast, configuration.config), React, {
    components: configuration.components,
  });
};