import { describe, it, expect } from 'vitest'
import { render } from '@testing-library/react'
import { LegendSwatch } from './legend-swatch'

function swatch(container: HTMLElement) {
  return container.querySelector<SVGSVGElement>('svg')!
}

describe('<LegendSwatch>', () => {
  it('renders a circle by default (filled, no border)', () => {
    const { container } = render(<LegendSwatch color='#f00' />)
    const svg = swatch(container)
    expect(svg.getAttribute('data-shape')).toBe('circle')
    const circle = svg.querySelector('circle')!
    expect(circle.getAttribute('fill')).toBe('#f00')
    expect(circle.getAttribute('stroke')).toBe('none')
  })

  it('renders a square shape', () => {
    const { container } = render(<LegendSwatch shape='square' color='#f00' />)
    expect(swatch(container).querySelector('rect')).toBeTruthy()
  })

  it('renders a line shape', () => {
    const { container } = render(<LegendSwatch shape='line' color='#f00' />)
    const svg = swatch(container)
    expect(svg.getAttribute('data-shape')).toBe('line')
    expect(svg.querySelector('line')).toBeTruthy()
  })

  it('isStrokeColor paints the border, not the fill', () => {
    const { container } = render(
      <LegendSwatch shape='square' color='#0f0' isStrokeColor />,
    )
    const rect = swatch(container).querySelector('rect')!
    expect(rect.getAttribute('fill')).toBe('none')
    expect(rect.getAttribute('stroke')).toBe('#0f0')
  })

  it('emits a <pattern> def for a patterned fill and references it', () => {
    const { container } = render(
      <LegendSwatch shape='square' color='#00f' fillPattern='diagonal' />,
    )
    const svg = swatch(container)
    const pattern = svg.querySelector('pattern')!
    expect(pattern).toBeTruthy()
    const rect = svg.querySelector('rect')!
    expect(rect.getAttribute('fill')).toBe(`url(#${pattern.id})`)
  })

  it('solid fill emits no <pattern>', () => {
    const { container } = render(<LegendSwatch shape='square' color='#00f' />)
    expect(swatch(container).querySelector('pattern')).toBeNull()
  })

  it('dashed border sets a stroke-dasharray', () => {
    const { container } = render(
      <LegendSwatch
        shape='square'
        color='#000'
        isStrokeColor
        strokeStyle='dashed'
      />,
    )
    expect(
      swatch(container).querySelector('rect')!.getAttribute('stroke-dasharray'),
    ).toBeTruthy()
  })

  it('corner-marks render four paths (square only)', () => {
    const { container } = render(
      <LegendSwatch
        shape='square'
        color='#000'
        isStrokeColor
        strokeStyle='corners'
      />,
    )
    const svg = swatch(container)
    expect(svg.querySelectorAll('path')).toHaveLength(4)
    expect(svg.querySelector('rect')).toBeNull()
  })

  it('gracefully degrades: corners on a circle falls back to a solid border', () => {
    const { container } = render(
      <LegendSwatch
        shape='circle'
        color='#000'
        isStrokeColor
        strokeStyle='corners'
      />,
    )
    const svg = swatch(container)
    // No corner paths; a plain stroked circle instead.
    expect(svg.querySelectorAll('path')).toHaveLength(0)
    const circle = svg.querySelector('circle')!
    expect(circle.getAttribute('stroke')).toBe('#000')
    expect(circle.getAttribute('stroke-dasharray')).toBeFalsy()
  })

  it('dash-dot line sets the dash-dot dasharray', () => {
    const { container } = render(
      <LegendSwatch shape='line' color='#000' strokeStyle='dash-dot' />,
    )
    expect(
      swatch(container).querySelector('line')!.getAttribute('stroke-dasharray'),
    ).toBe('5 2 0.1 2')
  })
})