<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
import type { FollowerEntry } from "@/Types/types"
import FollowerCard from "@/Components/FlightsGoneBy/Admin/FollowerCard.vue";

const followers = ref<FollowerEntry[]>([])
const loading = ref(true)

onMounted(async () => {
    const { data } = await axios.get<FollowerEntry[]>('/followers')
    followers.value = data
    loading.value = false
})

const pendingCount = computed(() => followers.value.filter(f => !f.verified).length)

function handleApproved(userId: number) {
    const entry = followers.value.find(f => f.user.id === userId)
    if (entry) entry.verified = true
}

function handleRemoved(userId: number) {
    followers.value = followers.value.filter(f => f.user.id !== userId)
}
</script>

<template>
    <div v-if="loading" class="d-flex justify-center py-8">
        <v-progress-circular indeterminate color="primary" />
    </div>

    <div v-else>
        <p v-if="pendingCount" class="text-body-2 text-medium-emphasis mb-3">
            {{ pendingCount }} pending request{{ pendingCount > 1 ? 's' : '' }}
        </p>

        <p v-if="!followers.length" class="text-body-2 text-medium-emphasis">
            No followers yet.
        </p>

        <FollowerCard
            v-for="entry in followers"
            :key="entry.user.id"
            :entry="entry"
            class="mb-2"
            @approved="handleApproved(entry.user.id)"
            @denied="handleRemoved(entry.user.id)"
            @removed="handleRemoved(entry.user.id)"
        />
    </div>
</template>
