<template>
	<div>
		<TopMenu key="menu" :config="headerMeta" />

<!-- 
staticke komponenty zustavaji zobrazeny pri prechodu mezi jednotlivymi strankami..
pokud je dalsi stranka po nacteni dat neobsahuje, pak zmizi, ale v dobe nacitani zde zustavaji;
daji se tim vytvaret hezke komponenty, napr. mapa - zustane vykreslena, cele okoli stranky se vsak zmeni
-->

		<div key="staticComponents">
			<EntityComponent v-for="(item, key) of topLevelStaticComponents" :key="key" :source="item" :pageEntityObject="loadedEntityObject" />
		</div>

		<div v-if="isTemplateLoading">
			<div class="spacer-full"></div>
			<Standard class="loader-container">
				<div class="loader align-center">
					<img src="~public/loader.gif" />
					<div class="spacer-full"></div>
					<h3>{{ $t('loader.level.' + loaderLevel) }}</h3>
				</div>
			</Standard>
		</div>
		<div v-else-if="templateLoadingFailed">
			<div class="spacer-full"></div>
			<Standard style="min-height: 450px">
				<h1>{{ $t('loader.failed') }}</h1>
				<div class="spacer-full"></div>
				<ErrorLinks />
			</Standard>
		</div>
		<div v-else>
			<EntityComponent v-for="(item, key) of topLevelComponents" :key="key" :source="item" :pageEntityObject="loadedEntityObject" />
		</div>

		<FooterStandard key="footer" />

		<Sidebar />
	</div>
</template>

<script type="text/javascript">
import { mapGetters, mapActions } from 'vuex'

import TopMenu from '../components/TopMenu.vue'
import Standard from '../components/grid/Standard.vue'
import FooterStandard from '../components/FooterStandard.vue'
import Sidebar from '../components/Sidebar.vue'
import EntityComponent from '../components/EntityComponent.vue'
import ErrorLinks from '../components/custom/ErrorLinks.vue'

import { translateCollection } from '../utils'

const createId = (collection, id, $route) => {
	const col = routeName === 'topics' ? routeName : collection
	return translateCollection(col) + '/' + (id || 0)
}

export default {
	props: ['collection', 'id'],
	
	components: {
		TopMenu,
		EntityComponent,
		Standard,
		FooterStandard,
		ErrorLinks,
		Sidebar,
	},
	
	data () {
		const { collection, id } = this.$route.params
		const { name } = this.$route
		
		return {
			id: createId(collection, id, name),
			loaderLevel: 0,
			timeout: null,
		}
	},

	metaInfo () {
		return {
			title: this.isTemplateLoading ? 'Loading...' : (
				this.templateLoadingFailed
					? 'Error'
					: ''
			),
		}
	},

	computed: {
		...mapGetters([
			'loadedEntityObject',
			'loadingEntityId',
			'getMetaData',
			'getCompleteTemplate',
			'isTemplateLoading',
			'templateLoadingFailed',
		]),

		topLevelComponents () {
			return this.recursiveComponents(this.getCompleteTemplate)
				.filter(i => i.static !== true)
		},

		topLevelStaticComponents () {
			return this.recursiveComponents(this.getCompleteTemplate)
				.filter(i => i.static === true)
		},

		headerMeta () {
			if (this.isTemplateLoading) {
				if (this.loadingEntityId === 'homepage/0' || this.loadingEntityId === 'topics/0') {
					return {
						header: {
							variant: 'default',
						},
					}
				}

				return {}
			}

			return this.getMetaData
		},
	},
  
	methods: {
		recursiveComponents (source) {
			if (! source || ! source.components) {
				return []
			}

			return source.components.map(obj => {
				for (const i in obj) {
					return obj[i]
				}
			})
		},

		startLoader () {
			this.loaderLevel = 0
			this.timeout = setTimeout(() => {
				this.loaderLevel++

				this.timeout = setTimeout(() => {
					this.loaderLevel++
				}, 2500)
			}, 1500)
		},

		...mapActions([
			'loadTemplateData',
		]),
	},

	// fetching data (also for server-side rendering)
	asyncData ({ store, route }) {
		return store.dispatch('loadTemplateData', {
			entityId: createId(route.params.collection, route.params.id, route),
		})
	},

	watch: {
		'isTemplateLoading' (to) {
			if (! to && this.timeout) {
				clearTimeout(this.timeout)
			}
		},

		'$route' (to, from) {
			const toEntityId = createId(to.params.collection, to.params.id, this.$route)

			if (this.id !== toEntityId) {
				this.id = toEntityId

				this.loadTemplateData({
					entityId: toEntityId,
				})

				this.startLoader()

				if (window) {
					window.scrollTop = 0
				}
			}
		},
	},
}
</script>

<style lang="stylus" scoped>
.loader
	padding 180px 0

</style>