<template>
	<main class="container">
		<h2 class="text-center my-4 font-weight-light">
			{{ $t("favoris.title") }}
		</h2>
		<NavigationLoader :isLoading="$apollo.queries.favoris.loading" />
		<div class="row">
			<div class="col">
				<transition name="fade">
					<div class="alert alert-danger" v-if="error">{{ error }}</div>
				</transition>
				<transition name="fade">
					<MemberList
						:members="favoris"
						v-if="favoris && favoris.length != 0" />
				</transition>
				<transition name="fade">
					<div
						class="alert alert-info"
						v-if="
							!$apollo.queries.favoris.loading && favoris && favoris.length == 0
						">
						{{ $t("favoris.none") }}
					</div>
				</transition>
			</div>
		</div>
	</main>
</template>

<script>
import { FAVORIS } from "@/graphql/queries.js"

export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("favoris.title"),
					active: true
				}
			],
			error: null
		}
	},
	apollo: {
		favoris: {
			query: FAVORIS,
			variables() {
				return {
					group: this.$favourites.list
				}
			},
			update(data) {
				let retour = []
				for (let i = 0; i < data.filterGroup.selected.length; i++) {
					retour[i] = data.filterGroup.selected[i].id
				}

				return retour
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/favoris",
			en: "/favourites",
			es: "/favoritos"
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
	}
}
</script>