import type { ReactElement } from 'react'
import type { MarkdownKind } from './markdown'
import type { PreviewText } from './types'
import { createContext, useContext, useMemo } from 'react'
import { cn } from '@/lib/utils'
import { renderMarkdown } from './markdown'
import { SegmentText } from './SegmentText'

/** 卡片里的 Markdown 说明按哪种渲染：页面上是注释；定义卡片浮窗里是 peek（别的文件的注释，不认不带路径的引用）。 */
export const MarkdownKindContext = createContext<Exclude<MarkdownKind, 'answer'>>('comment')

/** 预览里的一段文字：着色的词按源码排版；Markdown 说明渲染成段落、列表、代码块。 */
export function TextPreview({ text, className }: { text: PreviewText, className?: string }): ReactElement {
  const kind = useContext(MarkdownKindContext)
  if ('markdown' in text)
    return <MarkdownPreview html={renderMarkdown(text.markdown, kind)} className={className} />
  return (
    <p className={cn('cr-code', className)}>
      <SegmentText segments={text} />
    </p>
  )
}

export function MarkdownPreview({ html, className }: { html: string, className?: string }): ReactElement {
  const content = useMemo(() => ({ __html: html }), [html])
  return <div className={cn('cr-markdown', className)} dangerouslySetInnerHTML={content} />
}