import hljs from 'highlight.js/lib/core';
import javascript from 'highlight.js/lib/languages/javascript';
import xml from 'highlight.js/lib/languages/xml';
import { Prop, toNative } from 'vue-facing-decorator';
import TsxComponent, { Component } from '../../app/vuetsx';
import 'highlight.js/styles/github.css';

interface HighlightJsArgs {
	script: string;
}

@Component
class HighlightJsComponent extends TsxComponent<HighlightJsArgs> implements HighlightJsArgs {
	@Prop() script!: string;
	_initialized: boolean;

	initHljs() {
		hljs.initHighlightingOnLoad();
		hljs.registerLanguage('javascript', javascript);
		hljs.registerLanguage('xml', xml);
	}

	getTextArea(): HTMLTextAreaElement {
		return this.$refs.highlightJsElem as HTMLTextAreaElement;
	}

	syncWithView() {
		const elem = this.getTextArea();
		if (elem != null) {
			elem.textContent = this.script;

			if (!this._initialized) {
				this.initHljs();
				this._initialized = true;
			}

			hljs.highlightBlock(this.$refs.highlightJsElem as any);
		}
	}

	mounted() {
		this.syncWithView();
	}

	updated() {
		this.syncWithView();
	}

	render(h) {
		if (this.script == null) {
			return null;
		}

		return (
			<pre>
				<code ref="highlightJsElem">{this.script}</code>
			</pre>
		);
	}
}

const HighlightJs = toNative(HighlightJsComponent);
export default HighlightJs;