<template src='./template.html'></template>
<style scoped src='./style.css'></style>

<script>
	
	import ModalPanel from '../modalpanel/ModalPanel.vue'


	export default {
		components: { 'modalpanel': ModalPanel },
		mounted: function () {},
		props: ['transform-matrix', 'image-path', 'image-height', 'image-width'],
		data () {

			return {
				diffText: "",
				tagMode: false,
				textMode: false,
				fragmentMode: false,
				originalPath: "",
				modifiedPath: "",
				tags: []	
			}
		},

		mounted () { return false; },

		computed: {
			matrixTransform: function () {
				var matrixTransform = "";
				if (this.transformMatrix) {
					matrixTransform = "matrix(" + this.transformMatrix + ")";
				}
				return matrixTransform;
			}
		},

		methods: {

			setContent: function (content) {
				this.$refs.modalcontent.appendChild(content);
			},
			
			switchMode: function (mode) {
				var availableMode = ["tagMode", "textMode", "fragmentMode"];
				this.tagMode = false;
				this.textMode = false;
				this.fragmentMode = false;
				if (availableMode.indexOf(mode) !== -1) {
					this[mode] = true;	
				}
			},


			showTagDiff: function (tags, editedTags) {
				this.switchMode("tagMode");
				//si le label a changé considé qu'il a été effacé.
				var diff = iconolab.JsonDiff.diff(tags, editedTags);
				var tagsToRender = [];
				
				tags.forEach(function(tag, i) { 

					var tag = JSON.parse(JSON.stringify(tag));
					var deletedDiff = diff["_"+i];
					var currentDiff = diff[i];

					if (!deletedDiff && !currentDiff) {
						tagsToRender.push(tag); //render this tag
					}
					
					if (Array.isArray(deletedDiff)) {
						tag.action = "del";
						tagsToRender.push(tag);
						return true;
					}

					if (currentDiff && (currentDiff.tag_label || currentDiff.relevancy || currentDiff.accuracy)) {
						tag.action = (currentDiff.tag_label) ? "replace" : "update";
						tag.new_label =  editedTags[i].tag_label;
						tag.new_accuracy = editedTags[i].accuracy;
						tag.new_relevancy = editedTags[i].relevancy;
						tagsToRender.push(tag);
						return true;
					}
					if (Array.isArray(currentDiff)) {
						tag.action = "add";
						tagsToRender.push(editedTags[i]);
						return true;
					}
				});
				/* deal with remain */
				if (tags.length < editedTags.length) {
					var remainedTags = editedTags.slice(tags.length);
					remainedTags.forEach(function (tag, i) {
						tag.action = "add";
						tagsToRender.push(tag);	
					});
				}
				this.tags = tagsToRender;
			},

			showTextDiff: function (original, mod) {
				this.switchMode("textMode");
				var diff = iconolab.JsDiff.diffWords(original, mod);
				var fragment = document.createDocumentFragment();
				for (var i=0; i < diff.length; i++) {

					if (diff[i].added && diff[i + 1] && diff[i + 1].removed) {
						var swap = diff[i];
						diff[i] = diff[i + 1];
						diff[i + 1] = swap;
					}

					var node;
					if (diff[i].removed) {
						node = document.createElement('del');
						node.appendChild(document.createTextNode(diff[i].value));
					} else if (diff[i].added) {
						node = document.createElement('ins');
						node.appendChild(document.createTextNode(diff[i].value));
					} else {
						node = document.createTextNode(diff[i].value);
					}

					fragment.appendChild(node);
				}

				this.diffText = jQuery('<div>').append(fragment).html();		
			},
			
			showFragmentDiff: function (originalPath, modifiedPath) {
				this.switchMode("fragmentMode");
				this.originalPath = originalPath;
				this.modifiedPath = modifiedPath;
			},

			show: function () {
				this.$refs.panel.show();
			},

			hide: function () {
				this.$refs.panel.hide();
			}
		}
	}

</script>