import 'chart.js/auto'
import {MermaidDiagram} from '@lightenna/react-mermaid-diagram'
import EChartsReact from 'echarts-for-react'
import {Chart} from 'react-chartjs-2'
import Markdown from 'react-markdown'
import remarkGfm from 'remark-gfm'
import {trim} from 'es-toolkit'

type MarkdownOptions = {
  content: string
}

function MarkdownRender(options: MarkdownOptions) {
  return (
    <Markdown
      remarkPlugins={[
        remarkGfm,
      ]}
      children={options.content}
      components={{
        code: ({children, className, node, ...rest}) => {
          switch (trim(className || '')) {
            case 'language-mermaid':
              return (
                <MermaidDiagram
                  children={children as string}
                />
              )
            case 'language-chartjs':
              let chartjsData = eval(`(${children as string})`)
              return (
                <Chart
                  {...chartjsData}
                />
              )
            case 'language-echart':
              let echartData = eval(`(${children as string})`)
              return (
                <EChartsReact option={echartData}/>
              )
            default:
              return (
                <code {...rest} className={className}>
                  {children}
                </code>
              )
          }
        },
      }}
    />
  )
}

export default MarkdownRender