const {ElemJS} = require("../basic")
const {lazyLoad} = require("../lazy-load-module")

class HighlightedCode extends ElemJS {
	constructor(element) {
		super(element)
		if (this.element.tagName === "PRE" && this.element.children.length === 1 && this.element.children[0].tagName === "CODE") {
			// we shouldn't nest code inside a pre. put the text in the pre directly.
			const code = this.element.children[0]
			this.clearChildren()
			for (const child of code.childNodes) {
				this.element.appendChild(child)
			}
		}
		if (this.element.textContent.length > 80) {
			/*
			  no need to highlight very short code blocks:
			  - content inside might not be code, some users still use code blocks
			    for plaintext quotes
			  - language detection will almost certainly be incorrect
			  - even if it's code and the language is detected, the user will
			    be able to mentally format small amounts of code themselves

			  feel free to change the threshold number
			*/
			lazyLoad("https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10/build/highlight.min.js").then(hljs => hljs.highlightBlock(this.element))
		}
	}
}

module.exports = {HighlightedCode}