<script>
	import Marked from 'marked'

	Marked.setOptions({
		highlight: function (code) {
			return require('highlight.js').highlightAuto(code).value;
		}
	});

	const renderer = new Marked.Renderer();
	renderer.link = function (href, title, text) {
		if(!href.match(/[a-z]+:\/\/.+/i)) {
			href = 'http://' + href;
		}

		return `
			<a @click='showAjaxErrorsModal = true'>
				${text}
			</a>
		`;
	};

	export default {
		name: 'InputEditorPreview',
		props: ['value', 'mentions'],
		data () {
			return {
				HTML: ''
			}
		},
		computed: {
			valueWatch () {
				this.getHTML();
				return '';
			}
		},
		methods: {
			getHTML () {
				let replacedMd = this.value;

				(this.mentions || []).forEach(mention => {
					let regexp = new RegExp('(^|\\s)@' + mention + '($|\\s)')
					replacedMd = replacedMd.replace(regexp, `$1[@${mention}](/user/${mention})$2`)
				})

				let HTML = Marked(replacedMd, { renderer });

				this.HTML = HTML;
				this.$linkExpander(HTML, v => this.HTML = v);
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '../assets/scss/variables.scss';

	.input_editor_preview {
		@at-root #{&}__markdownHTML {
			height: 8.125rem;
			overflow: auto;
			padding: 0.5rem;

			@at-root #{&}--empty {
				@include text($font--role-emphasis, 1rem);
				display: flex;
				margin-top: 0.5rem;
				align-content: center;
				@include user-select(none);
				cursor: default;
				color: $color__darkgray--primary;
			}
		}
	}
</style>
