import { describe, expect, it } from 'vitest'
import { renderToString } from 'react-dom/server'

import { TagInput } from './tag-input'

describe('React TagInput', () => {
  it('renders provided tags using static suggestion metadata', () => {
    const html = renderToString(
      <TagInput
        tags={['T1059.001']}
        placeholder="Add technique..."
        delimiter="," 
        suggestions={[
          { value: 'T1059.001', label: 'PowerShell', category: 'Execution', color: '#7c3aed' },
          { value: 'T1071.001', label: 'Web Protocols' },
        ]}
      />
    )

    expect(html).toContain('PowerShell')
    expect(html).toContain('Remove T1059.001')
    expect(html.match(/#7c3aed/g)?.length).toBe(2)
  })

  it('renders a disabled input when max tags are reached', () => {
    const html = renderToString(
      <TagInput tags={['alpha', 'beta']} maxTags={2} placeholder="Add tag..." />
    )

    expect(html).toContain('placeholder="Max tags reached"')
    expect(html).toContain('disabled=""')
    expect(html).toContain('data-tag="alpha"')
    expect(html).toContain('data-tag="beta"')
  })

  it('renders combobox attributes and custom class names', () => {
    const html = renderToString(
      <TagInput
        className="custom-tag-input"
        suggestions={[{ value: 'tag-a', label: 'Tag A' }]}
        placeholder="Search tags"
      />
    )

    expect(html).toContain('custom-tag-input')
    expect(html).toContain('role="combobox"')
    expect(html).toContain('aria-expanded="false"')
    expect(html).toContain('placeholder="Search tags"')
  })
})
