// Shared SVG composition helpers for the brand render scripts. Compositions
// are assembled at render time by nesting the canonical brand SVGs into a
// paper-colored canvas, so derived art can never drift from the logo files.

import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'

export const PAPER = '#f4f3ee'

/** Inline a brand SVG as a nested <svg> positioned inside a composition. */
export function nest(file, x, y, width, height = width) {
  return readFileSync(resolve(file), 'utf8')
    .replace('<?xml', '<!--')
    .replace(
      '<svg ',
      `<svg x="${x}" y="${y}" width="${width}" height="${height}" `,
    )
}

/**
 * Nest the generated wordmark at a target width, centered on cy. Its
 * viewBox varies with the measured text, so the height follows the file.
 */
export function nestWordmark(x, cy, width) {
  const svg = readFileSync(resolve('brand/wordmark.svg'), 'utf8')
  const [, vw, vh] = svg.match(/viewBox="0 0 (\d+) (\d+)"/)
  const height = Math.round((width * Number(vh)) / Number(vw))
  return nest('brand/wordmark.svg', x, Math.round(cy - height / 2), width, height)
}

/** Embed a PNG capture (not a brand SVG) as a positioned data-URI image. */
export function nestPng(file, x, y, width, height) {
  const b64 = readFileSync(resolve(file)).toString('base64')
  return `<image x="${x}" y="${y}" width="${width}" height="${height}" href="data:image/png;base64,${b64}"/>`
}

/** Wrap a tile body ({ width, height, body }) in a paper-colored canvas. */
export function compose(tile) {
  return (
    `<svg xmlns="http://www.w3.org/2000/svg" width="${tile.width}" height="${tile.height}">` +
    `<rect width="${tile.width}" height="${tile.height}" fill="${PAPER}"/>` +
    tile.body() +
    '</svg>'
  )
}