// TODO: accept parameters like height, width, theme, etc
function previewHandler() {
	return {
		component: null,
		snippet: null,
		copied: false,
		setup() {
			// TODO: Doing this here is too late as Alpine already has set it up
			this.component = this.$el.querySelector('[x-data]')
			this.buildSnippet()
			this.$refs.pane.innerHTML = this.component.outerHTML
			this.$el.style.setProperty('display', 'block')
		},
		buildSnippet() {
			this.snippet = document.createElement('pre')
			this.snippet.classList.add('absolute', 'inset-0', 'overflow-scroll', 'bg-gray-200', 'font-mono', 'p-4', 'pt-8')
			this.snippet.appendChild(this.component)
			let html = this.snippet.innerHTML
			let tokens = lolight.tok(html)

			tokens = tokens.map((token, index) => {

				// If it's a return or new line
				if (/\r|\n/.exec(token[1])) {
					
					// The return should be first, ie strip leading spaces
					token[1] = token[1].replace(/\s+[\n|\r]/, '')
					
					// Check the length of the \r + tabs
					const length = (/\r|\n/.exec(token[1]).input.length)
					
					// Only set the spaces the first time
					if (typeof spacesOffset === 'undefined') {
						// The first indent should always be 1 space, 
						// so with the \r that would mean a length of 2
						spacesOffset = 2 - length
					}
					token[1] = token[1].slice(0, (spacesOffset ? spacesOffset : length))
					
					// Replace tabs with 4 spaces
					token[1] = token[1].replace(/\t/g, '    ')
					
					return token[1]
				}
				// TODO: Might be nicer to put each directive on it's own line
				// But it will take some time to get the indentation right
				// Perhaps use the spaceOffset from above...
				// if (token[1] === '@') return '\n\t@'
				// if (token[1] === ':') return '\n\t:'
				// if (token[0] === 'key') {
				// 	if (tokens[index + 1] && tokens[index - 1][0] == 'pct') {
				// 		return token[1]
				// 	}
				// 	return '\n\t' + token[1]
				// }
				return token[1].replace(/[\u00A0-\u9999<>\&]/gim, i => '&#'+i.charCodeAt(0)+';')
			}).join('')
			this.snippet.innerHTML = tokens
			lolight.el(this.snippet) // https://larsjung.de/lolight/
		},
		selectSnippet(event) {
			const range = document.createRange()
			range.selectNode(event.target)
			window.getSelection().removeAllRanges()
			window.getSelection().addRange(range)
            document.execCommand('copy')
		},
		copySnippet(event) {
			if (this.copied) return
			window.getSelection().removeAllRanges()
			event.clipboardData.setData('text/plain', this.component.outerHTML)
			this.copied = true
			setTimeout(() => {
				this.copied = false
			}, 2000)
		}
	}
}