<template>
	<main class="container">
		<h2 class="text-center my-5 font-weight-light">{{ $t("futureexits") }}</h2>
		<div class="row mb-4">
			<div class="col-6 m-auto text-center">
				<label for="period" class="form-label">{{
					$t("previsions.period.title")
				}}</label>
				<select
					class="form-control"
					id="period"
					aria-describedby="periodHelp"
					v-model="period"
					@change="save">
					<option v-for="index in 30" :key="index" :value="index">
						{{ $tc("jours", index) }}
					</option>
				</select>
				<small id="periodHelp" class="form-text text-muted">{{
					$t("previsions.period.desc")
				}}</small>
			</div>
		</div>
		<NavigationLoader :isLoading="$apollo.queries.wwResult.loading" />
		<transition name="fade">
			<div
				class="alert alert-danger"
				v-if="error && !$apollo.queries.wwResult.loading">
				{{ error }}
			</div>
		</transition>
		<transition name="fade">
			<div v-if="wwResult && !$apollo.queries.wwResult.loading">
				<div class="row">
					<div class="col-md-6 col-lg-6">
						<h2 class="h4 text-danger text-center">{{ $t("statut.renew") }}</h2>
						<MemberList
							:members="wwResult['membership']"
							:displayPubkey="false" />
					</div>
					<div class="col-md-6 col-lg-6">
						<h2 class="h4 text-danger text-center">
							{{ $t("statut.bientotmanquecertif") }}
						</h2>
						<MemberList
							:members="wwResult['outOfCerts']"
							:displayPubkey="false" />
					</div>
				</div>
			</div>
		</transition>
	</main>
</template>

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

const day = 24 * 60 * 60
const defaultPeriod = 30 * day

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,
			period: 30
		}
	},
	methods: {
		save() {
			this.error = null
			localStorage.setItem("previsions_period", this.getPeriod() / day)
		},
		addValue(arr, val) {
			if (
				arr.filter(function (e) {
					return e.uid === val.uid
				}).length == 0
			) {
				arr.push(val)
			}
			return arr
		},
		getPeriod() {
			if (this.period != "") {
				let tempPeriod = parseInt(this.period)
				if (tempPeriod < 1) {
					this.error = this.$t("error.tooSmall", [tempPeriod, 1, 30])
					return day
				}
				if (tempPeriod > 30) {
					this.error = this.$t("error.tooBig", [tempPeriod, 1, 30])
					return 30 * day
				}
				return this.period * day
			}
			return defaultPeriod
		}
	},
	apollo: {
		wwResult: {
			query: NEXT_EXITS,
			variables() {
				return { period: this.getPeriod() }
			},
			update(data) {
				let result = { membership: [], outOfCerts: [] }

				data.memEnds.forEach((member) => {
					if (
						["danger", "warning"].includes(
							this.$options.filters.dateStatus(member.limitDate)
						)
					) {
						result.membership.push(member)
					}

					if (
						["danger", "warning"].includes(
							this.$options.filters.dateStatus(
								member.received_certifications.limit
							)
						)
					) {
						result.outOfCerts.push(member)
					}
				})

				return result
			},
			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)
		if (localStorage.previsions_sorties) {
			this.period = localStorage.getItem("previsions_period")
		}
	}
}
</script>