import { describe, expect, it } from 'vitest'
import { createSvgIcon, createSvgNode, replaceWithSvgIcon } from '../svg'

describe('svg utilities', () => {
  it('creates SVG nodes with attributes and children', () => {
    const node = createSvgNode({
      tag: 'svg',
      attrs: { viewBox: '0 0 10 10', width: 10, height: 10 },
      children: [
        {
          tag: 'path',
          attrs: { d: 'M1 1L9 9', stroke: 'currentColor' },
          children: [],
        },
      ],
    })

    expect(node.namespaceURI).toBe('http://www.w3.org/2000/svg')
    expect(node.getAttribute('viewBox')).toBe('0 0 10 10')
    expect(node.querySelector('path')?.getAttribute('d')).toBe('M1 1L9 9')
  })

  it('creates svg icons and replaces element contents', () => {
    const host = document.createElement('span')
    host.textContent = 'old'

    replaceWithSvgIcon(host, { width: 12, height: 12, viewBox: '0 0 12 12' }, [
      {
        tag: 'circle',
        attrs: { cx: 6, cy: 6, r: 5, fill: 'none' },
        children: [],
      },
    ])

    const svg = host.firstElementChild
    expect(svg?.tagName.toLowerCase()).toBe('svg')
    expect(svg?.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg')
    expect(svg?.querySelector('circle')?.getAttribute('r')).toBe('5')
  })

  it('creates standalone icons', () => {
    const icon = createSvgIcon({ width: 16, height: 16 }, [])

    expect(icon.getAttribute('width')).toBe('16')
    expect(icon.childElementCount).toBe(0)
  })

  it('does not allow callers to override xmlns', () => {
    const icon = createSvgIcon({ xmlns: 'http://example.com/bad', width: 16, height: 16 }, [])
    expect(icon.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg')
  })
})
