{% extends "iconolab_base.html" %}


{% block content %}
	<div id="textDiff">
		<a @click="showModal">Afficher le modal</a>	
		<diff-viewer ref="panel">
			<h4 slot="header">Visualiser les différences</h4>
			<div slot="content">
				<div ref="modalcontent">
					
					<div v-show='tagMode'>
						<ul>
							<li>
								Harris | revelence: 5 - accuracy : 5	
							</li>
							
							<li>
								<del>--</del> <del>Harris</del> a été remplacé par
								<ins>++</ins> <strong><ins>Toto</ins></strong> relevence :<ins>3</ins> - accuracy: <ins>5</ins>
							</li>

							<li>
								<strong>Inculte</strong> | revelence: <del>5</del><ins>3</ins> - accuracy : <del>5</del><ins>4</ins>	
							</li>
							<li>
								<ins>++</ins> Toto relevence : <ins>3</ins> - accuracy: <ins>5</ins>
							</li>
							<li>
								<ins>++</ins> Toto relevence : <ins>3</ins> - accuracy: <ins>5</ins>
							</li>
							<li>
								<del>--</del> <del>Freud</del>
							</li>
						</ul>
						<hr>
						<ul>
						{% verbatim %}
							<li v-for="(tag, index) in tags">
								<template v-if="tag.state=='replace'">
									<del>--</del> <del>{{ tag.tag_label }}</del> a été remplacé par
									<ins>++</ins> <strong><ins>{{ tag.new_label }}</ins></strong> 
									précision : <ins>{{ tag.new_accuracy }}</ins> - 
									pertinence: <ins>{{ tag.new_relevancy }}</ins>
								</template>
								<template v-if="tag.state=='add'">
									<li>
										<ins>++</ins> <ins>{{ tag.tag_label }}</ins>
										précision : <ins>{{ tag.accuracy }}</ins> - 
										pertinence : <ins>{{ tag.relevancy }}</ins>
									</li>
								</template>
								<template v-if="tag.state=='update'">
									<li>	
										<strong>{{ tag.tag_label }}</strong> 
										<template v-if="tag.accuraty != tag.new_accuraty">
											précision: <del>{{ tag.accuraty }}</del><ins>{{ tag.new_accuraty }}</ins> -	
										</template>
										<template v-if="tag.accuraty == tag.new_accuraty">
											précision: {{ tag.accuraty }} -	
										</template>
										<template v-if="tag.relevancy != tag.new_relevancy">
											pertinence: <del>{{ tag.relevancy }}</del><ins>{{ tag.new_relevancy }}</ins>
										</template>
										<template v-if="tag.relevancy == tag.new_relevancy">
											pertinence: {{ tag.relevancy }}	
										</template>
											
									</li>
								</template>
							</li>
						{% endverbatim %}
						</ul>
					</div>
				</div>
			</div>
		</diff-viewer>

		<a @click="showTextDiff">Show Text diff</a>|<a @click="showTagDiff">Tag</a>|<a @click="showFragmentDiff">Fragment diff</a>
	</div>
{% endblock %}

{% block footer_js %}

<style>
	.diff-panel {border: 1px solid gray; width: 300px; heigth: 250px;}
	del {
		text-decoration: none;
		color: #b30000;
		background: #fadad7;
	}
	ins {
		background: #eaf2c2;
		color: #406619;
		text-decoration: none;
	}
</style>


<script type="text/javascript">

	
	//var test = iconolab.jsdiff.Diff.diffChars("Harris", "Harrisson");
	console.log(iconolab.JsDiff.diffWords("Harris", "idne Harrisson"));

	var main = new Vue({
		components: { 'DiffViewer': iconolab.VueComponents.DiffViewer },
		el: "#textDiff",
		//components: {'diff-viewer': Panel},
		mounted: function () {
			/*var self = this;
			var cp = 0;
			setInterval(function () { 
				if (cp == content.length) { cp = 0; }
				self.$refs.modalcontent.innerHTML = content[cp];
				cp = cp + 1;
			},1000);*/
		},

		data : {
			tagMode: false,
			content: "<p @click='test'>harris</p>",
			tags: []
		},

		methods: {
			
			test: function () {
				alert("icic");
			},

			setContent: function (content) {
				this.$refs.modalcontent.appendChild(content);
			},

			showTagDiff: function () {
				this.tagMode = true;
				var tags = [
					{"tag_label":"Harris", "accuracy":3, "relevancy": 1},
					{"tag_label":"Freud", "accuracy":3, "relevancy": 1},
				];

				var editedTags = [
					{"tag_label":"Harris", "accuracy":2, "relevancy": 5},
					{"tag_label":"Patrov", "accuracy":5, "relevancy": 3},
					{"tag_label":"Freud", "accuracy":5, "relevancy": 3},
					
				];
				//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
					}
					console.log("currentDiff", currentDiff);
					if (Array.isArray(deletedDiff)) {
						tag.state = "del";
						tagsToRender.push(tag);
						return true;
					}
					if (currentDiff.tag_label || currentDiff.relevancy || currentDiff.accurenty) {
						tag.state = (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.state = "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.state = "add";
						tagsToRender.push(tag);	
					});
				}
				this.tags = tagsToRender;
			},

			showTextDiff: function () {
				var original = "Il vient un temps où le soleil décline lentement derrière les cimes";
				var modif = "Il vient un temps où le soleil, comme s'il était un pièce métal chauffée à blanc, décline derrière les cimes";
				var diff = iconolab.JsDiff.diffWords(original, modif);
				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);
				}

				//result.textContent = '';
				this.setContent(fragment);
			
			},
			

			showModal: function () {
				this.$refs.panel.show();
			}
		}
	});
</script>
{% endblock %}