import type { MarkdownRenderer } from 'vitepress'

export function mermaidPlugin(md: MarkdownRenderer) {
  const defaultFence = md.renderer.rules.fence.bind(md.renderer.rules)

  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
    const token = tokens[idx]
    const info = token.info.trim()

    if (info === 'mermaid') {
      const id = `mermaid-${idx}`
      const encoded = encodeURIComponent(token.content)
      return `<Mermaid graph="${encoded}" id="${id}"></Mermaid>`
    }

    return defaultFence(tokens, idx, options, env, self)
  }
}