<template>
    <div class="table-responsive">
        <table class="table table-striped table-hover" v-if="certifsPending.length > 0">
            <tbody>
                <tr v-for="certif in certifsPending" :key="getNeighbor(certif).uid + certif.expires_on"
                    @click="$router.push(localePath({name:'membres-hash', params: {hash: getNeighbor(certif).hash}}))">
                    <th scope="row" class="py-1">
                        <div>
                            {{ getNeighbor(certif).uid }}
                            <BadgeCertifStatus :limitDate="getNeighbor(certif).received_certifications.limit" :memberStatus="getNeighbor(certif).status" />
                            <BadgeQuality :quality="getNeighbor(certif).quality.ratio" v-if="getNeighbor(certif).status != 'REVOKED'" />
                        </div>
                        <div>
                            <BadgeStatus :membre="getNeighbor(certif)" />
                            <BadgeDispo :isDispo="getNeighbor(certif).minDatePassed" :dateDispo="getNeighbor(certif).minDate" v-if="getNeighbor(certif).status == 'MEMBER'" />
                        </div>
                    </th>
                    <td class="text-right py-1">
                        <small><span class="badge" :class="'badge-'+ $options.filters.dateStatus(certif.expires_on)">{{ $d(new Date(certif.expires_on*1000), 'short') }}</span></small>
                        <small class="d-block"><span class="badge badge-secondary">{{ $t('traitement') }}</span></small>
                    </td>
                </tr>
            </tbody>
        </table>
        <hr v-if="(certifsPending.length > 0) && (certifsTriees.length > 0)" />
        <table class="table table-striped table-hover" v-if="certifsTriees.length > 0">
            <thead>
                <th @click="sort('uid')">
                    {{ $t('membres') }}
                    <div class="d-inline-block position-absolute ml-2">
                        <div class="up" :class="{
                            'sorted' : currentSortDir == 'desc' && currentSort == 'uid',
                            'invisible' : currentSortDir == 'asc' && currentSort == 'uid'
                        }">▲</div>
                        <div class="down" :class="{
                            'sorted' : currentSortDir == 'asc' && currentSort == 'uid',
                            'invisible' : currentSortDir == 'desc' && currentSort == 'uid'
                        }">▼</div>
                    </div>
                </th>
                <th @click="sort('expires_on')">
                    {{ $t('expire') }}
                    <div class="d-inline-block position-absolute ml-2">
                        <div class="up" :class="{
                            'sorted' : currentSortDir == 'desc' && currentSort == 'expires_on',
                            'invisible' : currentSortDir == 'asc' && currentSort == 'expires_on'
                        }">▲</div>
                        <div class="down" :class="{
                            'sorted' : currentSortDir == 'asc' && currentSort == 'expires_on',
                            'invisible' : currentSortDir == 'desc' && currentSort == 'expires_on'
                        }">▼</div>
                    </div>
                </th>
            </thead>
            <tbody>
                <tr v-for="certif in certifsTriees" :key="getNeighbor(certif).uid + certif.expires_on"
                    @click="$router.push(localePath({name:'membres-hash', params: {hash: getNeighbor(certif).hash}}))">
                    <th scope="row" class="py-1">
                        <div>
                            {{ getNeighbor(certif).uid }}
                            <BadgeCertifStatus :limitDate="getNeighbor(certif).received_certifications.limit" :memberStatus="getNeighbor(certif).status" />
                            <BadgeQuality :quality="getNeighbor(certif).quality.ratio" v-if="getNeighbor(certif).status != 'REVOKED'" />
                        </div>
                        <div>
                            <BadgeStatus :membre="getNeighbor(certif)" />
                            <BadgeDispo :isDispo="getNeighbor(certif).minDatePassed" :dateDispo="getNeighbor(certif).minDate" v-if="getNeighbor(certif).status == 'MEMBER'" />
                        </div>
                    </th>
                    <td class="text-right py-1">
                        <small><span class="badge" :class="'badge-'+ $options.filters.dateStatus(certif.expires_on)">{{ $d(new Date(certif.expires_on*1000), 'long') }}</span></small>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            currentSort:'expires_on',
            currentSortDir:'asc'
        }
    },
    props : {
        certifs : Array,
        type : {
            type: String,
            required: true,
            validator: function (value) {
                const types = ['received','sent']
                return types.indexOf(value) !== -1
            }
        }
    },
    methods : {
        getNeighbor(certif) {
            return this.type == "received" ? certif.from : certif.to
        },
        sort(s) {
            if(s === this.currentSort) {
                this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
            }
            this.currentSort = s;
        }
    },
    computed : {
        certifsTriees() {
            return this.certifs.slice().sort((a, b) => {
                let modifier = this.currentSortDir === 'desc' ? -1 : 1
                let sens = this.type == 'received' ? "from" : "to"

                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[sens]['uid'].toLowerCase() < b[sens]['uid'].toLowerCase()) return -1 * modifier
                    if(a[sens]['uid'].toLowerCase() > b[sens]['uid'].toLowerCase()) return 1 * modifier
                }

                return 0
            }).filter((el) => {return el.pending == false})
        },
        certifsPending() {
            return this.certifs.slice().sort((a, b) => a.expires_on - b.expires_on).filter((el) => {return el.pending == true})
        }
    }
}
</script>

<style lang="scss" scoped>
thead th {
    position: relative;
    cursor:pointer;
    background: var(--background-color-secondary);

    &:last-child {
        padding-right: 1.5rem;
        text-align: right;
    }
}

.up, .down {
    line-height: 10px;
    font-size: 1.1rem;
    transform: scale(1.5,1);
    opacity: .3;
}

.sorted {
    opacity: 1;
}
</style>