import { parseHTML } from 'linkedom'

export const updateDynamicContent = (html, metadata, mediaHtml) => {
  const { document } = parseHTML(html)

  const titleTag = document.querySelector('title[data-dynamic="title"]')
  if (titleTag) titleTag['textContent'] = metadata['title']

  const dynamicMetaSelectors = [
    { selector: 'meta[data-dynamic="description"]', attribute: 'content', value: metadata['description'] },
    { selector: 'meta[data-dynamic="og:title"]', attribute: 'content', value: metadata['og:title'] },
    { selector: 'meta[data-dynamic="og:description"]', attribute: 'content', value: metadata['og:description'] },
    { selector: 'meta[data-dynamic="og:image"]', attribute: 'content', value: metadata['og:image'] },
    { selector: 'meta[data-dynamic="og:url"]', attribute: 'content', value: metadata['canonical'] },
  ]

  dynamicMetaSelectors.forEach(({ selector, attribute, value }) => {
    const element = document.querySelector(selector)
    if (element) element.setAttribute(attribute, value)
  })

  const canonicalLink = document.querySelector('link[rel="canonical"]')
  if (canonicalLink) canonicalLink.setAttribute('href', metadata['canonical'])

  const pageElement = document.querySelector('[data-dynamic="page"]')
  if (pageElement) pageElement.innerHTML = mediaHtml

  return document.toString()
}