<template>
	<div class="ui basic segment">
		<div class="ui container">
			<div class="fun" :style="{'color':color}" v-if="noteText" v-html="noteText"></div>
		</div>
		<div class="ui basic segment"></div>
	</div>
</template>

<script>

	import axios from 'axios';

	export default {
		name: 'SharePage',
		data(){
			return {
				noteText: null,
				color: '#000'
			}
		},
		beforeMount(){
			//Mount notes on load if note ID is set
			if(this.$route.params && this.$route.params.id){
				const id = this.$route.params.id
				this.openNote(id)
			}
		},
		methods:{
			openNote(noteId){
				axios.post('/api/public/note', {'noteId': noteId})
				.then( response => {

					let colors = JSON.parse(response.data.color)

					if(colors && colors.noteBackground){
						document.body.style.background = colors.noteBackground
					}
					if(colors && colors.noteText){
						this.color = colors.noteText
					}

					this.noteText = response.data.text
				})
			}
		}
	}

</script>