var basePath = document.currentScript.src + '/../../';

modal = new Vue({
	el: '#modal',
	data: {
		msg: '<none>',
		title: '<info>'
	},
	methods: {
		show: function(msg, title) {
			if (title) {
				this.title = title;
			}
			this.msg = msg;
			$('#mmodal').modal();
		}
	}
})

Vue.component('vue-easymde', VueEasyMDE.VueEasyMDE)

var blobMap = {}

app = new Vue({
	el: '#app',
	data: {
		text: null,
		enurl: null,
		copyicon: 'fa-clone',
		easyMDEOpts: {
			maxHeight: '47vh',
			onToggleFullScreen: function() { $('.navbar').toggle(); },
			sideBySideFullscreen: false,
			spellChecker: false,
			toolbar: [
				'undo', 'redo', '|',
				'bold', 'italic', 'strikethrough', 'heading', '|',
				'quote', 'unordered-list', 'ordered-list', 'check-list', '|',
				'link', 'image',
				{
					name: 'upload-image',
					action: EasyMDE.drawUploadedImage,
					className: 'fa fa-upload',
					title: 'Upload File',
				},
				{
					name: 'add-table',
					action: EasyMDE.drawTable,
					className: 'fa fa-table',
					title: 'Insert Table',
				},
				'horizontal-rule', '|',
				'preview', 'side-by-side', 'fullscreen', '|', 'guide'
			],
			renderingConfig: { codeSyntaxHighlighting: true },
			uploadImage: true,
			imageAccept: '*',
			imageMaxSize: 268435456,
			imageUploadFunction: function(file, onSuccess, onError) {
				var url = URL.createObjectURL(file);
				var reader = new FileReader();
				reader.onerror = onError;
				reader.onload = function() {
					blobMap[url] = reader.result;
					var prefix = '[' + file.name + ']';
					if (file.type.startsWith('image')) {
						prefix = '!' + prefix;
					}
					var test = new RegExp('\\[(.+)(' + file.name + ')?\\]\\(blob:.*?\\1\\)');
					app.text = app.text.replace(test, prefix + '(' + url + ')');
				};
				onSuccess(url);
				reader.readAsDataURL(file);
			},
		},
	},
	methods: {
		copyTempURL: function() {
			navigator.clipboard.writeText(app.enurl).then(function() {
				app.copyicon = 'fa-check';
				setTimeout(function() {
					app.copyicon = 'fa-clone';
				}, 3000);
			})
		},
		getTempURL: function() {
			$('#enurl').loading({
				message: '<loading>',
				onStop: function(loading) {
					loading.overlay.fadeOut(650);
				}
			});
			axios.post(basePath + 'api/get-temp', {
				text: app.text.replace(/\]\((blob:[^)]*)\)/g, function(_, blobURL) {
					return '](' + blobMap[blobURL] + ')';
				})
			}).then(function(response) {
				$('#enurl').loading('stop');
				var data = response.data;
				if (data.status == 1) {
					app.enurl = location.origin + location.pathname + data.guid;
				} else {
					modal.show('<failed>', '<error>');
					throw 'failed to get the tmp url!';
				}
				console.log(response);
			}).catch(function(error) {
				var msg;
				if (error.code) {
					if (error.code === 'ERR_NETWORK') msg = '<neterr>';
					if (error.code === 'ERR_BAD_REQUEST') msg = 'Bad Request';
				} else {
					msg = error.response ? error.response.data.message : '<unknerr>';
				}
				console.warn(error);
				$('#enurl').loading('stop');
				modal.show('<failed><br><br>' + msg, '<error>')
			})
		}
	}
})