<template>
	<div>
		<div class="ui icon large label" v-for="tag in tags">
			 {{ucWords(tag.text)}} <i class="delete icon" v-on:click="removeTag(tag.id)"></i>
		</div>
		<input v-model="newTagInput" v-on:keyup.enter="addTag" placeholder="Add Tag" />
		<div class="ui divider"></div>
	</div>
</template>

<script>
	
	import axios from 'axios';

	export default {
	name: 'NoteTagEdit',
		props: [ 'noteId' ],
		data () {
			return {
				tags: null,
				newTagInput: ''
			}
		},
		beforeMount(){

		},
		mounted() {
			this.getTags()
		},
		methods: {
			getTags(){
				//Get Note Tags -> /api/tags/get
				let vm = this
				axios.post('/api/tags/get', {'noteId': this.noteId})
				.then(response => {
					//Set up local data
					vm.tags = response.data
				})
			},
			addTag(event){

				//post to -> /api/addtagtonote
				let postData = {
					'tagText':this.newTagInput,
					'noteId':this.noteId
				}
				let vm = this
				axios.post('/api/tags/addtonote', postData)
				.then(response => {
					vm.newTagInput = ''
					vm.getTags()
				})
			},
			removeTag(tagId){

				let postData = {
					'tagId':tagId,
					'noteId':this.noteId
				}
				let vm = this
				axios.post('/api/tags/removefromnote', postData)
				.then(response => {
					vm.getTags()
				})
			},
			ucWords(str){
				return (str + '')
				.replace(/^(.)|\s+(.)/g, function ($1) {
					return $1.toUpperCase()
				})
			}
		}
	}
</script>