import MarkdownStyles from '../../../src/elements/highlight/MarkdownStyles.js'
import '../../../src/elements/highlight/marked-highlight.js'

function configChangedHandler(e: Event): void {
  const input = e.target as HTMLInputElement
  const prop = input.id as 'breaks' | 'sanitize' | 'pedantic' | 'disableRemoteSanitization'
  const value = input.checked
  const nodes = document.querySelectorAll('marked-highlight')
  Array.from(nodes).forEach((node) => {
    node[prop] = value
  })
}

const nodes = document.querySelectorAll('#config input[type="checkbox"]')
Array.from(nodes).forEach((node) => {
  node.addEventListener('change', configChangedHandler)
})

const style = MarkdownStyles.styleSheet
if (style) {
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, style]
}
