import createDOMPurify from 'dompurify'

const getIconifySvgMap = new Map<string, Promise<string> | string>()

const purify = createDOMPurify()

export async function getIconifySvg(collection: string, icon: string) {
  const id = `${collection}:${icon}`
  if (getIconifySvgMap.has(id)) {
    return getIconifySvgMap.get(id)!
  }
  const promise = _get()
    .then((svg) => {
      getIconifySvgMap.set(id, svg)
      return svg
    })
    .catch((err) => {
      // Don't cache failures — drop the entry so a later render can retry.
      getIconifySvgMap.delete(id)
      throw err
    })
  getIconifySvgMap.set(id, promise)
  return promise

  async function _get() {
    const url = `https://api.iconify.design/${collection}/${icon}.svg?color=currentColor&width=100%`
    // Bound the request so a stalled connection (offline / flaky CDN / firewall
    // black-holing the host) rejects instead of hanging forever — the caller
    // already degrades a rejected fetch to a blank icon.
    const svg = await fetch(url, { signal: AbortSignal.timeout(10_000) }).then(res => res.text())
    return purify.sanitize(svg)
  }
}
