<template>
	<div :class="{'is-touch': isTouch}">
		<div :class="{'is-hidden': !online}">
			<!-- This is a workaround to get the sw to "see" the to-be-cached version of the offline background image -->
			<div class="offline" style="height: 0;width: 0;"></div>
			<top-navigation v-if="authUser"/>
			<content-auth v-if="authUser"/>
			<content-link-share v-else-if="authLinkShare"/>
			<content-no-auth v-else/>
			<notification/>
		</div>
		<div class="app offline" v-if="!online">
			<div class="offline-message">
				<h1>You are offline.</h1>
				<p>Please check your network connection and try again.</p>
			</div>
		</div>

		<transition name="fade">
			<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
		</transition>
	</div>
</template>

<script>
import {defineComponent} from 'vue'
import {mapState, mapGetters} from 'vuex'
import isTouchDevice from 'is-touch-device'

import Notification from './components/misc/notification'
import {KEYBOARD_SHORTCUTS_ACTIVE, ONLINE} from './store/mutation-types'
import KeyboardShortcuts from './components/misc/keyboard-shortcuts'
import TopNavigation from './components/home/topNavigation'
import ContentAuth from './components/home/contentAuth'
import ContentLinkShare from './components/home/contentLinkShare'
import ContentNoAuth from './components/home/contentNoAuth'
import {setLanguage} from './i18n'
import AccountDeleteService from '@/services/accountDelete'
import {store} from '@/store'
import {i18n} from '@/i18n'
import {success} from '@/message'

function setupOnlineStatus() {
	store.commit(ONLINE, navigator.onLine)
	window.addEventListener('online', () => store.commit(ONLINE, navigator.onLine))
	window.addEventListener('offline', () => store.commit(ONLINE, navigator.onLine))
}

function setupRedirects(route) {
	if (typeof route.query.userPasswordReset !== 'undefined') {
		localStorage.setItem('passwordResetToken', route.query.userPasswordReset)
		return {name: 'user.password-reset.reset'}
	} else if (typeof route.query.userEmailConfirm !== 'undefined') {
		localStorage.setItem('emailConfirmToken', route.query.userEmailConfirm)
		return {name: 'user.login'}
	} else if (route.fullPath.endsWith('frontend/index.html')) {
		// Make sure to always load the home route when running with electron
		return {name: 'home'}
	}
}

async function setupAccountDeletionVerification(route) {
	if (typeof route.query.accountDeletionConfirm === 'undefined') {
		return
	}

	const accountDeletionService = new AccountDeleteService()
	await accountDeletionService.confirm(route.query.accountDeletionConfirm)
	success({message: i18n.global.t('user.deletion.confirmSuccess')})
	await store.dispatch('auth/refreshUserInfo')
}

export default defineComponent({
	name: 'app',
	components: {
		ContentNoAuth,
		ContentLinkShare,
		ContentAuth,
		TopNavigation,
		KeyboardShortcuts,
		Notification,
	},
	beforeRouteEnter(to) {
		setupOnlineStatus()
		const redirect = setupRedirects(to)
		if (redirect) return redirect
		setupAccountDeletionVerification(to)
	},
	beforeCreate() {
		// FIXME: async action in beforeCreate, might be not finished when component mounts
		this.$store.dispatch('config/update')
			.then(() => {
				this.$store.dispatch('auth/checkAuth')
			})
		this.$store.dispatch('auth/checkAuth')

		setLanguage()
	},
	computed: {
		isTouch() {
			return isTouchDevice()
		},
		...mapState({
			online: ONLINE,
			keyboardShortcutsActive: KEYBOARD_SHORTCUTS_ACTIVE,
		}),
		...mapGetters('auth', [
			'authUser',
			'authLinkShare',
		]),
	},
})
</script>
