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

	import ModalPanel from '../modalpanel/ModalPanel.vue'

		components: { 'modalpanel': ModalPanel },

		mounted: function () {},

		props: ['transform-matrix', 'image-path', 'image-height', 'image-width'],

				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;

			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;

				this.$refs.panel.show();

			},

			hide: function () {

				this.$refs.panel.hide();