import { renderToStaticMarkup } from 'react-dom/server'
import { describe, expect, it } from 'vitest'
import { BlockTools } from './BlockTools'

function render(editing: boolean, ask?: { asking: boolean }, rewrite?: { rewriting: boolean }): string {
  return renderToStaticMarkup(
    <BlockTools
      editing={editing}
      onToggleEdit={() => {}}
      {...(ask && { asking: ask.asking, onToggleAsk: () => {} })}
      {...(rewrite && { rewriting: rewrite.rewriting, onRewrite: () => {} })}
    />,
  )
}

/** 标签之间的字：图标（svg）没有字，按钮上有字就会出现在这里 */
const visibleText = (html: string): string => html.replace(/<[^>]*>/g, '').trim()

describe('块右上角的图标按钮', () => {
  it.each([[false, '编辑'], [true, '预览']] as const)('编辑中 = %s：只有图标不带字，名字在悬停提示和 aria-label 里', (editing, label) => {
    const html = render(editing)
    expect(html).toMatch(/^<div[^>]* role="group" aria-label="块操作"/)
    expect(visibleText(html)).toBe('')
    expect(html.match(/<button/g)).toHaveLength(1)
    expect(html).toContain(`data-tooltip="${label}" aria-label="${label}"`)
    expect(html).not.toContain(' title=')
    expect(html).toMatch(/<button[^>]*><svg/)
    expect(html.includes('data-active')).toBe(editing)
  })

  it.each([false, true])('「问 AI」排在编辑前面，只有图标；问答区展开着 = %s 时带按下标记', (asking) => {
    const html = render(false, { asking })
    expect(visibleText(html)).toBe('')
    const buttons = [...html.matchAll(/<button[^>]*>/g)].map(match => match[0])
    expect(buttons).toHaveLength(2)
    expect(buttons[0]).toContain('data-tooltip="问 AI" aria-label="问 AI"')
    expect(buttons[0]).toContain(`aria-expanded="${asking}"`)
    expect(buttons[0].includes('data-active')).toBe(asking)
    expect(buttons[1]).toContain('data-tooltip="编辑"')
  })

  it('「按注释规范重写」排在「问 AI」左边；正在重写时禁用，不用原生 title，按钮上不转圈', () => {
    const html = render(false, { asking: false }, { rewriting: false })
    expect(visibleText(html)).toBe('')
    expect(html).not.toContain(' title=')
    const buttons = [...html.matchAll(/<button[^>]*>/g)].map(match => match[0])
    expect(buttons).toHaveLength(3)
    expect(buttons[0]).toContain('data-tooltip="按注释规范重写" aria-label="按注释规范重写"')
    expect(buttons[0]).not.toContain('disabled')
    expect(buttons[1]).toContain('data-tooltip="问 AI"')
    expect(buttons[2]).toContain('data-tooltip="编辑"')
    const busy = render(false, { asking: false }, { rewriting: true })
    expect(busy).toContain('disabled=""')
    expect(busy).toContain('aria-busy="true"')
    expect(busy).not.toContain('cr-qa-spin')
  })
})