import type { BlockView, KindIconName } from './types'
import { renderToStaticMarkup } from 'react-dom/server'
import { describe, expect, it } from 'vitest'
import { KIND_ICON_COMPONENTS, KIND_ICONS, KindIcon } from './kindIcons'

function render(block: Pick<BlockView, 'kind' | 'badge'>, name: string): string {
  return renderToStaticMarkup(<KindIcon block={block} name={name} />)
}

/** 标签之间的字：图标（svg）没有字 */
const visibleText = (html: string): string => html.replace(/<[^>]*>/g, '').trim()

describe('块的种类图标', () => {
  it('内置种类各有一个图标，和原型的一一对应', () => {
    expect(KIND_ICONS).toEqual({
      import: 'import',
      function: 'square-function',
      class: 'box',
      type: 'braces',
      enum: 'list-ordered',
      exception: 'triangle-alert',
      field: 'tag',
      const: 'lock',
      variable: 'variable',
      if: 'split',
      else: 'corner-down-right',
      loop: 'repeat',
      try: 'shield',
      catch: 'shield-alert',
      finally: 'shield-check',
      return: 'corner-down-left',
      statement: 'code',
      comment: 'message-square-text',
      interpreter: 'terminal',
      options: 'sliders-horizontal',
      case: 'signpost',
      command: 'square-terminal',
      pipeline: 'square-terminal',
    })
  })

  it('这组图标里每个名字画的就是 lucide 里同名的图标', () => {
    for (const name of Object.keys(KIND_ICON_COMPONENTS) as KindIconName[]) {
      const html = render({ kind: 'sqlalchemy.table', badge: { label: name, color: { dark: '#fff', light: '#000' }, icon: name } }, name)
      expect(html, name).toContain(`class="lucide lucide-${name}"`)
    }
  })

  it('只画图标不带字，名字在悬停提示（data-tooltip，不用原生 title）和 aria-label 里；20px 的框、16px 的图形', () => {
    const html = render({ kind: 'function' }, '函数')
    expect(visibleText(html)).toBe('')
    expect(html).toMatch(/^<span class="cr-kind [^"]*size-5[^"]*" role="img" data-tooltip="函数" aria-label="函数"><svg/)
    expect(html).not.toContain(' title=')
    expect(html).toContain('lucide-square-function')
    expect(html).toContain('width="16" height="16"')
  })

  it('库规则的卡片用规则给的图标，名字是规则给的', () => {
    const html = render({ kind: 'sqlalchemy.table', badge: { label: '数据表', color: { dark: '#e8a860', light: '#a3590d' }, icon: 'database' } }, '数据表')
    expect(html).toContain('lucide-database')
    expect(html).toContain('data-tooltip="数据表" aria-label="数据表"')
  })
})