<template>
	<div class="app pb-3">
		<NavigationBar :breadcrumb="breadcrumb" :menus="menus" />
		<Nuxt />
		<a
			class="scrollToTop fade bg-secondary position-fixed text-white d-flex align-items-center justify-content-center rounded"
			:title="$t('aria.scrolltotop')"
			href="#"
			@click="scrollToTop($event)">
			<solid-chevron-double-up-icon class="icon" aria-hidden="true" />
		</a>
	</div>
</template>

<script>
export default {
	head() {
		return {
			title: "Wotwizard",
			meta: [
				{
					hid: "description",
					name: "description",
					content: this.$i18n.t("meta.description")
				},
				{
					hid: "ogType",
					property: "og:type",
					content: "website"
				},
				{
					hid: "ogTitle",
					property: "og:title",
					content: "Wotwizard"
				},
				{
					hid: "ogDescription",
					property: "og:description",
					content: this.$i18n.t("meta.description")
				},
				{
					hid: "ogImage",
					property: "og:image",
					content: "https://wotwizard.axiom-team.fr/icon.png"
				},
				{
					hid: "twitterTitle",
					name: "twitter:title",
					content: "Wotwizard"
				},
				{
					hid: "twitterDescription",
					name: "twitter:description",
					content: this.$i18n.t("meta.description")
				},
				{
					hid: "twitterImage",
					name: "twitter:image",
					content: "https://wotwizard.axiom-team.fr/icon.png"
				}
			]
		}
	},
	data() {
		return {
			breadcrumb: [],
			// Les title correspondent aux chaînes de traduction dans /i18n/locales
			// Les icônes disponibles sont ici : https://vue-hero-icons.netlify.app/
			menus: [
				{
					title: "wot.title",
					items: [
						{ path: "/membres", title: "membres", icon: "search" },
						{ path: "/mes-suivis", title: "suivis.title", icon: "user-group" }
					]
				},
				{
					title: "previsions.title",
					items: [
						{
							path: "/previsions/futures_entrees",
							title: "previsions.futureentries",
							icon: "login"
						},
						{
							path: "/previsions/futures_sorties",
							title: "previsions.futureexits",
							icon: "logout"
						}
					]
				},
				{
					title: "infos",
					items: [
						{
							path: "/lexique",
							title: "lexique",
							icon: "question-mark-circle"
						},
						{ path: "/parametres", title: "params.title", icon: "adjustments" }
					]
				}
			]
		}
	},
	methods: {
		scrollToTop(e) {
			window.scrollTo({ top: 0, behavior: "smooth" })
			e.preventDefault()
		}
	},
	beforeMount() {
		window.addEventListener("scroll", function (e) {
			let scrollClassList = document.querySelector(".scrollToTop").classList
			let visible = scrollClassList.contains("show")
			if (!visible && window.scrollY > 250) {
				scrollClassList.add("show")
			} else if (visible && window.scrollY <= 250) {
				scrollClassList.remove("show")
			}
		})
	},
	created() {
		this.$nuxt.$on("changeRoute", (breadcrumb) => {
			this.breadcrumb = breadcrumb
		})
	},
	watch: {
		$route(to, from) {
			let tooltips = document.querySelectorAll(".tooltip.show")
			tooltips.forEach((tooltip) => {
				tooltip.classList.remove("show")
			})
		}
	}
}
</script>

<style lang="scss">
/* Define styles for the default root window element */
:root {
	--txt-primary-color: #000;
	--txt-secondary-color: #435770;
	--txt-muted-color: #5b728e;
	--txt-link: #6e7881;
	--bg-primary-color: #e9ecef;
	--bg-secondary-color: #dee2e6;
	--bg-menu-color: #ced4da;
	--border-color: #d8d8d8;
}

/* Define styles for the root window with dark - mode preference */
:root.dark-theme {
	--txt-primary-color: #fff;
	--txt-secondary-color: #c4cbd3;
	--txt-muted-color: #9fa2a4;
	--txt-link: #75828d;
	--bg-primary-color: #111828;
	--bg-secondary-color: #202938;
	--bg-menu-color: #323949;
	--border-color: #394050;
}

.app {
	--menu-size: 320px;
	transition: margin 0.5s ease-in-out;
	scroll-behavior: smooth;
}

main {
	--paddingTop: 96px;
	padding-top: var(--paddingTop);
	position: relative;

	@media (min-width: 576px) {
		--paddingTop: 126px;
	}
	@media (min-width: 768px) {
		--paddingTop: 96px;
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

.scrollToTop {
	z-index: 100;
	bottom: 1rem;
	right: -4rem;
	font-size: 2rem;
	width: 50px;
	height: 50px;
	opacity: 0.7;

	&.show {
		right: 1rem;
	}

	&:hover {
		opacity: 1;
	}
}
</style>