import { marked } from "marked"
import markedCodePreview from "marked-code-preview"
import { escapeHtmlAttr, slugifyString } from "../../util/index.js"

export function createMarkdownRenderer(meta) {
  const allowHtml = meta?.opts?.markdown?.allowHtml === true
  return marked
    .use({ gfm: true })
    .use(markedCodePreview)
    .use({
      renderer: {
        html(html) {
          return allowHtml ? html : ""
        },
        image({ href, title, text }) {
          const attrs = [`alt="${escapeHtmlAttr(text)}"`]

          const foundSrcSet = meta.resources.images?.[slugifyString(href)]

          if (foundSrcSet && foundSrcSet.detail.srcSet?.length > 0) {
            const srcSetString = foundSrcSet.detail.srcSet
              .map(src => src.join(" "))
              .join(", ")
            const defaultSrc = foundSrcSet.detail.srcSet[0][0]
            attrs.push(`src="${escapeHtmlAttr(defaultSrc)}"`)
            attrs.push(`srcset="${escapeHtmlAttr(srcSetString)}"`)
            attrs.push("sizes=\"(min-width: 800px) 40vw, 100vw\"")
            attrs.push(
              `style=\"aspect-ratio: ${escapeHtmlAttr(foundSrcSet.detail.aspectRatio)}\"`,
            )
          } else {
            attrs.push(`src="${escapeHtmlAttr(href)}"`)
          }

          if (title) {
            attrs.push(`title="${escapeHtmlAttr(title)}"`)
          }

          return `<img ${attrs.join(" ")} >`
        },
      },
    })
}