import { ImageResponse } from 'next/og'
import { ART_BACKGROUND, ART_HEIGHT, ART_WIDTH } from './canvas'
import type { ArtSeed } from './seed'
import { synths, type SynthName } from './synth'

export const OG_SIZE = { width: ART_WIDTH, height: ART_HEIGHT }
export const OG_CONTENT_TYPE = 'image/png'

export interface RenderOptions {
  /** Which synth draws the seed. Default: terrain. */
  synth?: SynthName
  /** Passed through to the synth (for terrain: { style, layoutFrom }). */
  options?: unknown
}

/**
 * Rasterize a seed. No text on purpose: every platform shows the title, description and domain
 * right next to the image (X even overlays its own domain label), so the image only has to say
 * "this is a map of something".
 */
export function renderOgArt(seed: ArtSeed, opts: RenderOptions = {}) {
  const synth = synths[opts.synth ?? 'terrain'] as (seed: ArtSeed, options?: unknown) => string
  const src = `data:image/svg+xml;utf8,${encodeURIComponent(synth(seed, opts.options))}`

  return new ImageResponse(
    (
      <div style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: ART_BACKGROUND }}>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img src={src} width={ART_WIDTH} height={ART_HEIGHT} alt="" />
      </div>
    ),
    { ...OG_SIZE },
  )
}