import React from "react"
import remarkGfm from "remark-gfm"
import remarkMath from "remark-math"

import { CodeBlock, InlineCode } from "../atoms/code-block"
import { MemoizedReactMarkdown } from "../organisms/memorized-markdown"
import Blockquote from "./blockquote"
import Strong from "./strong"
import Text from "./text"

export function Markdown({
  children,
  components,
}: {
  children: string | string[] | React.ReactNode[]
  components?: any
}) {
  const snippet = children as string
  const markdown = snippet.replace(/\n/g, "\n\n")

  return (
    <MemoizedReactMarkdown
      className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-code:text-foreground prose-pre:p-0"
      remarkPlugins={[remarkGfm, remarkMath]}
      components={{
        p({ children }) {
          return <Text className="my-0 w-full py-0">{children}</Text>
        },
        h1({ children }) {
          return <h1 className="font-bold">{children}</h1>
        },
        h2({ children }) {
          return <h2 className="border-b pb-4">{children}</h2>
        },
        strong({ children }) {
          return <Strong>{children}</Strong>
        },
        blockquote({ children }) {
          return <Blockquote className="w-full">{children}</Blockquote>
        },
        code({ inline, className, children, ...props }) {
          if (children.length) {
            if (children[0] == "▍") {
              return (
                <span className="mt-1 animate-pulse cursor-default">▍</span>
              )
            }

            children[0] = (children[0] as string).replace("`▍`", "▍")
          }

          const match = /language-(\w+)/.exec(className || "")
          const filenameMatch = /filename="(\w+.\w+)"/.exec(className || "")

          if (inline) {
            return (
              <InlineCode className={className} {...props}>
                {children}
              </InlineCode>
            )
          }

          return (
            <CodeBlock
              key={Math.random()}
              language={(match && match[1]) || ""}
              filename={(filenameMatch && filenameMatch[1]) || ""}
              snippet={String(children).replace(/\n$/, "")}
              preElementClass="py-0 my-0"
              {...props}
            />
          )
        },
        ...components,
      }}
    >
      {markdown}
    </MemoizedReactMarkdown>
  )
}