<template>
	<div class="ui grid">

		<div class="sixteen wide column"></div>

		<div class="sixteen wide column" v-if="text.length > 0 || title.length > 0">
			<div class="ui text container squire-box" :style="{ 'background-color':styleObject['noteBackground'], 'color':styleObject['noteText']}">

				<h1 v-if="title">{{title}}</h1>

				<div v-if="text" v-html="text"></div>

			</div>
		</div>

		<div class="sixteen wide column" v-if="!$store.getters.getLoggedIn">
			<div class="ui text container">
				<h2 class="ui header">
					<img class="small-logo" loading="lazy" src="/api/static/assets/logo.svg" alt="Solid Scribe Logo">
					<div class="content">
						Solid Scribe is an easy, free, secure Note App
						<div class="sub header">
							Encrypted notes, only readable by you. Unless you share them.
						</div>
					</div>
				</h2>
				<div class="ui grid">
					<div class="eight wide center aligned column">
						<router-link  class="ui compact green button" to="/login">
							<i class="plug icon"></i>Sign Up
						</router-link>
					</div>
					<div class="eight wide center aligned column">
						<router-link class="ui compact green button" to="/">
							<i class="comment outline icon"></i>
							Learn More
						</router-link>
					</div>
				</div>
			</div>
		</div>

		<div class="ui sixteen wide center aligned column">
			<h4>{{ failText }}</h4>
		</div>

	</div>
</template>

<script>

	import axios from 'axios';

	export default {
		name: 'SharePage',
		data(){
			return {
				title: '',
				text: '',
				failText: '',
				styleObject:{},
			}
		},
		beforeMount(){

			//You can put something here for live updates
			// this.$io.on
				
			this.openNote()
			
		},
		methods:{
			fail(){
				this.failText = 'Failed to open Shared Note'
				this.$bus.$emit('notification', 'Failed to Open Shared Note')
			},
			openNote(){

				const noteId = this.$route.params.id
				const sharedKey = this.$route.params.token

				axios.post('/api/public/opensharednote', {noteId, sharedKey})
				.then( ({data}) => {

					if(data.success){
						this.title = data.title
						this.text = data.text
						this.styleObject = data.styleObject
					} else {
						this.fail()
					}
				})
				.catch(error => { this.fail() })
			}
		}
	}

</script>

<style type="text/css" scoped>
	.small-logo {
		width: 30px;
		height: auto;
	}
</style>