<template>
	<main class="container">
		<h2 class="text-center my-5 font-weight-light">{{ $t("futureexits") }}</h2>
		<div class="form-check form-switch mb-4 d-flex justify-content-center">
			<input
				type="checkbox"
				id="favoris"
				class="form-check-input me-2"
				role="switch"
				v-model="favoris"
				@change="save()" />
			<label for="favoris" class="form-check-label">{{
				$t("favoris.use")
			}}</label>
		</div>
		<NavigationLoader :isLoading="$apollo.loading" />
		<transition name="fade">
			<Alerte type="danger" :error="error" />
		</transition>
		<transition name="fade">
			<div class="row" v-if="!$apollo.loading">
				<div class="col-lg-6 mb-5" v-if="memEnds">
					<h2 class="h4 text-danger text-center">
						{{ $t("statut.renew") }}
					</h2>
					<MemberList
						defaultSort="date_membership"
						:members="memEnds"
						type="adhesion" />
				</div>
				<div class="col-lg-6 mb-5" v-if="certEnds">
					<h2 class="h4 text-danger text-center">
						{{ $t("statut.bientotmanquecertif") }}
					</h2>
					<MemberList
						defaultSort="date_certs"
						:members="certEnds"
						type="certif" />
				</div>
			</div>
		</transition>
	</main>
</template>

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

export default {
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("previsions.title"),
					to: "/previsions"
				},
				{
					text: this.$t("futureexits"),
					active: true
				}
			],
			error: null,
			favoris: false,
			period: 1317600
		}
	},
	computed: {
		getParams() {
			if (this.favoris) {
				return localStorage.favourites
					? { group: this.$favourites.list, period: this.period }
					: { group: "wotwizard-nobody", period: this.period }
			}
			return { period: this.period }
		}
	},
	methods: {
		save() {
			localStorage.exitsFiltered = this.favoris
		}
	},
	apollo: {
		memEnds: {
			query: NEXT_EXITS,
			variables() {
				return this.getParams
			},
			error(err) {
				this.error = err.message
			}
		},
		certEnds: {
			query: NEXT_LOOSE_CERTS,
			variables() {
				return this.getParams
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/previsions/futures_sorties",
			en: "/forecasts/future_exits",
			es: "/pronosticos/futuras_salidas"
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
		this.favoris = localStorage.exitsFiltered == "true"
	}
}
</script>