<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>