<template>
	<div class="squire-box">
	<div>

		<h3 class="ui dividing header">
			<i class="inline green cog icon"></i>
			Settings for {{ $store.getters.getUsername }}
		</h3>

		<h4>New Scratch Pad</h4>
		<div class="ui segment">
			<p>Create a new scratch pad. Old scratch pad will turn into a normal note.</p>
			<div class="ui compact basic button shrinking" v-if="!showNewNoteConfirm" v-on:click="showNewNoteConfirm = true">
				<i class="sync alternate reload icon"></i>
				New Scratch Pad
			</div>
			<div v-if="showNewNoteConfirm" class="ui compact basic button shrinking" v-on:click="showNewNoteConfirm = false">
				<i class="close icon"></i>
				Cancel
			</div>
			<div v-if="showNewNoteConfirm" class="ui compact basic button shrinking" v-on:click="newQuickNote()">
				<i class="green thumbs up icon"></i>
				Confirm
			</div>
		</div>

		<!-- Accent Color -->
		<h4 class="ui header">
			Accent Color
		</h4>
		<div class="ui segment">
			<div class="ui doubling grid">
				<div class="sixteen wide column">
					<p>Theme changes are only saved to this browser.</p>
					<div 
						v-for="color in themeColors" 
						class="ui compact basic button"
						:style="`background: linear-gradient(0deg, ${color} 4%, rgba(0,0,0,0) 5%);`"
						v-on:click="setAccentColor(color)">
						<logo style="width: 33px; height: auto;" :color="color" />
					</div>
					
				</div>
			</div>
		</div>

		<!-- Enable Two Factor -->
		<h4>Two Factor Authentication</h4>
		<div class="ui segment">
			<div class="ui stackable grid">
				<div class="six wide column">
					<p>1. Enter Password and get QR</p>
					<div class="ui fluid action input">
						<input type="password" placeholder="Current Password" v-model="password">

						<div v-if="password.length == 0" class="ui disabled button">
							Get QR code
						</div>
						<div v-if="password.length > 0" class="ui green button" v-on:click="getQrCode()">
							Get QR code
						</div>
					</div>
				</div>
				<div class="four wide column">
					<p>2. Scan QR Code</p>
					<p v-if="qrCode == ''">(QR Code will appear here)</p>
					<img v-if="qrCode != ''" :src="qrCode" alt="QR Code">
				</div>
				<div class="six wide column">
					<p>3. Verify with code</p>
					<div class="ui fluid action input" v-if="qrCode != ''">
						<input type="text" placeholder="Verification Code" v-model="verificationToken" v-on:keyup.enter="verifyQrCode()">
						<div class="ui green button">
							Verify!
						</div>
					</div>
					<div class="ui fluid action input" v-if="qrCode == ''">
						<input type="text" placeholder="Verification Code" >
						<div class="ui disabled button">
							Verify!
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- change password  -->
		<h4>Change Password</h4>
		<div class="ui segment">
			<div class="ui stackable grid">
				<div class="five wide column">
					<p>Current Password</p>
					<div class="ui fluid input">
						<input v-model="change1" type="password" placeholder="Current Password">
					</div>
				</div>
				<div class="five wide column">
					<p>New Password</p>
					<div class="ui fluid input">
						<input v-model="change2" type="password" placeholder="New Password">
					</div>
				</div>
				<div class="six wide column">
					<p>Rereat New Password</p>
					<div class="ui fluid action input">
						<input v-model="change3" type="password" placeholder="Repeat Password">
						<div v-on:click="passwordChange()" class="ui button" :class="{'green':(change1.length > 0 && change2 == change3)}">
							Change it!
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- log out  -->
		<h4>Revoke Other Active Sessions</h4>
		<div class="ui segment">
			<div class="ui stackable grid">
				<div class="sixteen wide column">
					<p>Revoke access on any logged in device, except for the one you are currently using.<br><br></p>
					<div class="ui button" v-on:click="revokeAllSessions()">
						<i class="sign out icon"></i>
						Log Out all other devices
					</div>
				</div>
			</div>
		</div>

		<h4>Export All Data (In Development)</h4>
		<div class="ui segment">
			<p>Download all files and notes in raw text or html</p>
			<div class="ui button">Export all Data</div>
		</div>

		<h4>Delete Account (In Development)</h4>
		<div class="ui segment">
			<div class="ui stackable grid">
				<div class="eight wide column">
					<p>Delete all data. This can not be undone.</p>
					<div class="ui fluid input">
						<input type="password" placeholder="Current Password" v-model="password">
					</div>
				</div>
				<div class="four wide bottom aligned column">
					<div class="ui fluid button">Verify</div>
				</div>
				<div class="four wide bottom aligned column">
					<div class="ui disabled fluid button">Delete Account</div>
				</div>
			</div>
		</div>

		<div class="ui grid">
			<div class="center aligned sixteen wide column">
				<router-link to="/terms"></i>Solid Scribe Terms of Use</router-link>
			</div>
		</div>
		
	</div>
	</div>
</template>

<script>

	import axios from 'axios'

	export default {
		name: 'SettingsPage',
		components: {
			'logo':require('@/components/LogoComponent.vue').default,
		},
		data () {
			return {
				password: '',
				qrCode: '',
				verificationToken: '',
				showNewNoteConfirm: false,

				themeColors: [
					'#21BA45', //Green
					'#b5cc18', //Lime
					'#00b5ad', //Teal
					'#2185d0', //Blue
					'#7128b9', //Violet
					'#a333c8', // "Purple"
					'#e03997', //Pink
					'#db2828', //Red
					'#f2711c', //Orange
					'#fbbd08', //Yellow
					'#767676', //Grey
					'#303030', //Black-almost
				],

				change1: '',
				change2: '',
				change3: '',
			}
		},
		methods: {
			newQuickNote(){

				this.showNewNoteConfirm = true

				axios.post('/api/quick-note/new')
				.then( ({data}) => {
					this.showNewNoteConfirm = false
					this.$store.dispatch('fetchAndUpdateUserTotals')
					this.$bus.$emit('notification', 'New Scratch Pad Created')
				})

			},
			setAccentColor(color){

				let root = document.documentElement
				root.style.setProperty('--main-accent', color)
				localStorage.setItem('main-accent', color)

				if(!color || color == '#21BA45'){
					localStorage.removeItem('main-accent')
				}
			},
			getQrCode(){

				axios.post('/api/user/twofactorsetup', { password:this.password })
				.then(({data}) => {
					this.qrCode = data
				})
			},
			verifyQrCode(){

				axios.post('/api/user/verifytwofactorsetuptoken', { password:this.password, token: this.verificationToken })
				.then(({data}) => {
					if(data == true){
						//Two FA is set up
					} else {
						//It failed
					}
				})
			},
			passwordChange(){

				if(this.change1 == '' || this.change2 == '' || this.change3 == ''){
					this.$bus.$emit('notification', 'All Password Fields Required')
					return
				}

				if(this.change1 == this.change2){
					this.$bus.$emit('notification', 'Old password matches new password')
					return
				}

				if(this.change2 != this.change3){
					this.$bus.$emit('notification', 'New Passwords do not match')
					return
				}

				const postData = {
					'currentPass':this.change1,
					'newPass':this.change3
				}

				axios.post('/api/user/changepassword', postData)
				.then(({data}) => {
					if(data){
						this.$bus.$emit('notification', 'Success: Password Changed')
						this.change1 = ''
						this.change2 = ''
						this.change3 = ''
					} else {
						this.$bus.$emit('notification', 'Failed to change password')
						this.change1 = ''
					}
				})
			},
			revokeAllSessions(){
				axios.post('/api/user/revokesessions')
				.then(({data}) => {
					this.$bus.$emit('notification', 'All other active sessions revoked.')
				})
			}
		}
	}
</script>