<script>

import Typeahead from '../typeahead/Typeahead.vue'

export default {

	data () {
		return {}
	},
	
	components: {
		Typeahead: Typeahead
	},

	mounted () {

		this.targetKeyMap = {
			title: "proposal-title", 
			desc: "proposal-description",
			frag: "proposal-fragment"
		};

		this.targetFieldTypeMap = {
			title: "input", 
			desc: "input",
			frag: "frag"
		};

		this.originalValues = {
			title: "",
			desc: "",
			frag: ""
		}

	},

	methods: {

		pickProposition: function (event, sourceId, targetKey) {
			var value = "";
			var source = document.getElementById(sourceId);
			var targetField = this.$refs[this.targetKeyMap[targetKey]];
			var targetType = this.targetFieldTypeMap[targetKey];
			if (!targetType) { throw new Error("A target type must be provided..."); }
			
			if (targetType === "input") {
				value = targetField.value; 
				targetField.value = source.value;
			}

			 if (targetType === "frag") {
			 	value = targetField.getAttribute("d");
			 	var sourceValue = source.getAttribute("d");
			 	var targetPathType = targetField.getAttribute("data-path-type");
			 	targetField.setAttribute("d", sourceValue);
			 	
			 	var pathType = source.getAttribute("data-path-type");
			 	pathType = pathType || "FREE";
			 	var fragmentField = this.$refs["fragment-field"];
			 	fragmentField.value = sourceValue + ";" + pathType;
			 }

			 this.preserveOriginalValue(targetKey, value);
		},

		pickTag: function (event, refTag) {
			var source = this.$refs[refTag];
			var target = this.$refs['proposal-tags'];
			this.preserveOriginalValue('proposal-tags', target.tags);
			target.setTags(source.tags, true);
		},

		preserveOriginalValue: function (key, value) {
			if (!this.originalValues[key]) {
				this.originalValues[key] = value;
			}
		},

		hightlightSource: function (source) {
			source.className += "highlight";
		},

		save: function () {
			alert("this is it ... ");
		}
	}
}

</script>