// The composition helpers' logic that runs without Chrome: geometry and SVG
// nesting against the real brand files.
import { describe, expect, it } from 'vitest'

// @ts-expect-error plain-node script, no type declarations
import { compose, nest, nestWordmark } from '../../scripts/compose.mjs'

describe('nest', () => {
  it('positions the brand svg and keeps it a single nested element', () => {
    const svg = nest('brand/mark.svg', 10, 20, 64)
    expect(svg).toContain('<svg x="10" y="20" width="64" height="64" ')
    expect(svg).not.toContain('<?xml')
  })

  it('takes a distinct height when given one', () => {
    expect(nest('brand/mark.svg', 0, 0, 64, 32)).toContain('width="64" height="32"')
  })
})

describe('nestWordmark', () => {
  it('derives height from the wordmark viewBox and centers on cy', () => {
    const source = nest('brand/wordmark.svg', 0, 0, 1)
    const [, vw, vh] = source.match(/viewBox="0 0 (\d+) (\d+)"/)!
    const height = Math.round((560 * Number(vh)) / Number(vw))
    expect(nestWordmark(540, 315, 560)).toContain(
      `x="540" y="${Math.round(315 - height / 2)}" width="560" height="${height}"`,
    )
  })
})

describe('compose', () => {
  it('wraps the body in a paper canvas of the tile size', () => {
    const svg = compose({ width: 1200, height: 630, body: () => '<g id="body"/>' })
    expect(svg).toContain('width="1200" height="630"')
    expect(svg).toContain('fill="#f4f3ee"')
    expect(svg).toContain('<g id="body"/>')
  })
})