<template>
	<div class="table-responsive" v-if="certifs.length > 0">
		<input
			type="text"
			v-model="search"
			class="form-control w-75 mx-auto mb-2"
			:placeholder="$t('recherche.title')" />
		<table class="table table-striped table-hover">
			<thead class="thead-light sortable">
				<th class="position-relative" @click="sort('uid')">
					<BtnSort
						:title="$t('membres')"
						fieldName="uid"
						:currentSort="currentSort"
						:currentSortDir="currentSortDir" />
				</th>
				<th class="position-relative" @click="sort('expires_on')">
					<BtnSort
						class="justify-content-end"
						:title="$t('expire')"
						fieldName="expires_on"
						:currentSort="currentSort"
						:currentSortDir="currentSortDir" />
				</th>
			</thead>
			<tbody>
				<tr
					v-for="certif in certifsTriees"
					:key="certif.uid"
					@click="
						$router.push(
							localePath({
								name: 'membre',
								query: { hash: certif.hash }
							})
						)
					">
					<th scope="row" class="py-1">
						<div>
							<div class="d-flex">
								<div class="uid inline-block text-truncate">
									<span v-if="$favourites.list.includes(certif.uid)"
										>★&nbsp;</span
									>{{ certif.uid }}
								</div>
								&nbsp;
								<BadgeDanger
									:limitDate="certif.received_certifications.limit"
									:memberStatus="certif.status" />
							</div>
							<BadgeStatus :membre="certif" />
							<BadgeQuality
								:quality="certif.quality.ratio"
								v-if="!['REVOKED', 'NEWCOMER'].includes(certif.status)" />
							<BadgeDispo
								:isDispo="certif.minDatePassed"
								:dateDispo="certif.minDate"
								:certifs="certif.sent_certifications"
								v-if="certif.status == 'MEMBER'" />
						</div>
					</th>
					<td class="text-right py-1">
						<BadgeDate :date="certif.expires_on" styleDate="short" />
						<small class="d-block" v-if="certif.pending">
							<span class="badge badge-secondary">{{ $t("traitement") }}</span>
						</small>
					</td>
				</tr>
			</tbody>
		</table>
		<BtnPagination
			:currentPage.sync="currentPage"
			:pageSize="pageSize"
			:arrayLength="certifsFiltrees.length"
			v-if="certifsFiltrees.length > pageSize" />
	</div>
</template>

<script>
export default {
	data() {
		return {
			search: "",
			currentSort: "expires_on",
			currentSortDir: "asc",
			currentPage: 1,
			pageSize: 5
		}
	},
	props: {
		certifs: Array
	},
	methods: {
		sort(s) {
			if (s === this.currentSort) {
				this.currentSortDir = this.currentSortDir === "asc" ? "desc" : "asc"
			}
			this.currentSort = s
		}
	},
	computed: {
		certifsFiltrees() {
			return this.certifs.filter((row, index) => {
				return (
					this.search == "" ||
					row.uid.toLowerCase().includes(this.search.toLowerCase())
				)
			})
		},
		certifsTriees() {
			return this.certifsFiltrees
				.sort((a, b) => {
					let modifier = this.currentSortDir === "desc" ? -1 : 1

					if (this.currentSort == "expires_on") {
						if (a["expires_on"] < b["expires_on"]) return -1 * modifier
						if (a["expires_on"] > b["expires_on"]) return 1 * modifier
					} else {
						if (a["uid"].toLowerCase() < b["uid"].toLowerCase())
							return -1 * modifier
						if (a["uid"].toLowerCase() > b["uid"].toLowerCase())
							return 1 * modifier
					}

					return 0
				})
				.filter((row, index) => {
					let start = (this.currentPage - 1) * this.pageSize
					let end = this.currentPage * this.pageSize
					if (index >= start && index < end) return true
				})
		}
	}
}
</script>

<style lang="scss" scoped>
thead th:last-child {
	padding-right: 1.5rem;
	text-align: right;
}

.uid {
	max-width: 130px;

	@media (min-width: 576px) {
		max-width: 255px;
	}

	@media (min-width: 992px) {
		max-width: 205px;
	}
}
</style>