<template>
	<main>
		<NavigationLoader :isLoading="$apollo.queries.idFromHash.loading" />
		<transition name="fade">
			<div class="alert alert-danger" v-if="error">{{ error }}</div>
		</transition>
		<transition name="fade">
			<div v-if="idFromHash && !$apollo.queries.idFromHash.loading">
				<div class="container-md">
					<div class="row">
						<div class="col-lg-9 col-xl-8 mx-auto my-3">
							<MemberCard :hash="idFromHash" />
						</div>
					</div>
				</div>
				<div class="container">
					<div class="row mt-3" v-if="idFromHash.status != 'REVOKED'">
						<div class="col-sm-10 col-md-7 col-lg-5 mb-3 mx-auto">
							<h3
								class="h4 text-center"
								:class="{
									'text-success':
										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
										idFromHash.received_certifications.certifications.length >=
											5,
									'text-danger':
										['NEWCOMER', 'MISSING'].includes(idFromHash.status) &&
										idFromHash.received_certifications.certifications.length < 5
								}">
								{{ $t("certification.recues") }} ({{ nbCertifs("received")
								}}<span v-if="nbCertifsPending('received') != 0">{{
									"&nbsp;+&nbsp;" + nbCertifsPending("received")
								}}</span
								>)
								<BadgeDanger
									:limitDate="idFromHash.received_certifications.limit"
									:memberStatus="idFromHash.status" />
							</h3>
							<CertifList
								:certifs="idFromHash.received_certifications.certifications"
								type="received" />
						</div>
						<div
							class="col-sm-10 col-md-7 col-lg-5 mx-auto"
							v-if="['MISSING', 'MEMBER'].includes(idFromHash.status)">
							<h3 class="h4 text-center">
								{{ $t("certification.envoyees") }} ({{ nbCertifs("sent")
								}}<span v-if="nbCertifsPending('sent') != 0">{{
									"&nbsp;+&nbsp;" + nbCertifsPending("sent")
								}}</span
								>)
							</h3>
							<CertifList
								:certifs="idFromHash.sent_certifications"
								type="sent" />
						</div>
					</div>
				</div>
			</div>
		</transition>
	</main>
</template>

<script>
import { SEARCH_MEMBER } from "@/graphql/queries"

export default {
	name: 'membre',
	data() {
		return {
			breadcrumb: [
				{
					text: this.$t("accueil"),
					to: "/"
				},
				{
					text: this.$t("membres"),
					to: "/membres"
				},
				{
					text: "",
					active: true
				}
			],
			error: null
		}
	},
	methods: {
		nbCertifs(sens) {
			return sens == "received"
				? this.idFromHash.received_certifications.certifications.filter(
						(el) => {
							return el.pending == false
						}
				  ).length
				: this.idFromHash.sent_certifications.filter((el) => {
						return el.pending == false
				  }).length
		},
		nbCertifsPending(sens) {
			return sens == "received"
				? this.idFromHash.received_certifications.certifications.filter(
						(el) => {
							return el.pending == true
						}
				  ).length
				: this.idFromHash.sent_certifications.filter((el) => {
						return el.pending == true
				  }).length
		}
	},
	apollo: {
		idFromHash: {
			query: SEARCH_MEMBER,
			variables() {
				return { hash: this.$route.query.hash }
			},
			error(err) {
				this.error = err.message
			}
		}
	},
	nuxtI18n: {
		paths: {
			fr: "/membre",
			en: "/member",
			es: "/miembro"
		}
	},
	computed: {
		classWarning() {
			return {
				"text-danger": !this.idFromHash.received_certifications.limit,
				"text-warning":
					this.$options.filters.dateStatus(
						this.idFromHash.received_certifications.limit
					) == "warning"
			}
		}
	},
	mounted() {
		$nuxt.$emit("changeRoute", this.breadcrumb)
	},
	watch: {
		idFromHash: {
			handler(n, o) {
				this.breadcrumb[2].text = this.idFromHash.uid
				$nuxt.$emit("changeRoute", this.breadcrumb)
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.danger {
	cursor: default;
}
</style>