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

/**
 * 预览里的一段文字：着色的词按源码排版；Markdown 说明渲染成段落、列表、代码块。
 * `find` 是卡片上这段字的记号（见 [textKey](vscode/webview-ui/src/codeReader/viewState.ts#textKey)），查找栏按它找到这段字画高亮。
 */
export const TextPreview = memo(({ text, className, find }: { text: PreviewText, className?: string, find?: string }): ReactElement => {
  if ('markdown' in text)
    return <MarkdownPreview html={renderMarkdown(text.markdown)} className={className} find={find} />
  return (
    <p className={cn('cr-code', className)} data-find={find}>
      <SegmentText segments={text} />
    </p>
  )
})
TextPreview.displayName = 'TextPreview'

export function MarkdownPreview({ html, className, find, streaming }: { html: string, className?: string, find?: string, streaming?: boolean }): ReactElement {
  // 同一段 HTML 用同一个对象：React 见到新对象就整段重设 innerHTML，里面的链接都换成新元素，悬停着的那个就脱离了页面
  const content = useMemo(() => ({ __html: html }), [html])
  return <div className={cn('cr-markdown', className)} data-find={find} data-streaming={streaming ? '' : undefined} dangerouslySetInnerHTML={content} />
}