<script lang="ts" setup>
import { ref } from 'vue'
import axios from 'axios'
import type { FollowerEntry } from "@/Types/types"

const props = defineProps<{
    entry: FollowerEntry
}>()

const emit = defineEmits<{
    approved: []
    denied: []
    removed: []
}>()

const processing = ref(false)
const confirmingRemove = ref(false)

async function approve() {
    processing.value = true
    try {
        await axios.post(`/followers/${encodeURIComponent(props.entry.user.name)}/approve`)
        emit('approved')
    } finally {
        processing.value = false
    }
}

async function deny() {
    processing.value = true
    try {
        await axios.post(`/followers/${encodeURIComponent(props.entry.user.name)}/deny`)
        emit('denied')
    } finally {
        processing.value = false
    }
}

async function remove() {
    processing.value = true
    try {
        await axios.delete(`/followers/${encodeURIComponent(props.entry.user.name)}`)
        emit('removed')
    } finally {
        processing.value = false
        confirmingRemove.value = false
    }
}
</script>

<template>
    <v-card variant="outlined" class="follower-card pa-3 d-flex align-center">
        <v-icon icon="mdi-account-circle" size="40" class="mr-3" />

        <div class="flex-grow-1">
            <div class="text-body-2 font-weight-medium">{{ entry.user.name }}</div>
            <div v-if="!entry.verified" class="text-caption text-medium-emphasis">
                Wants to follow you
            </div>
        </div>

        <template v-if="!entry.verified">
            <v-btn
                size="small"
                color="primary"
                variant="flat"
                :loading="processing"
                class="mr-2"
                @click="approve"
            >
                Approve
            </v-btn>
            <v-btn
                size="small"
                variant="outlined"
                :disabled="processing"
                @click="deny"
            >
                Deny
            </v-btn>
        </template>

        <template v-else>
            <v-btn
                v-if="!confirmingRemove"
                size="small"
                variant="text"
                :disabled="processing"
                @click="confirmingRemove = true"
            >
                Remove
            </v-btn>
            <template v-else>
                <span class="text-caption mr-2">Remove follower?</span>
                <v-btn
                    size="small"
                    color="error"
                    variant="flat"
                    :loading="processing"
                    class="mr-1"
                    @click="remove"
                >
                    Confirm
                </v-btn>
                <v-btn
                    size="small"
                    variant="text"
                    :disabled="processing"
                    @click="confirmingRemove = false"
                >
                    Cancel
                </v-btn>
            </template>
        </template>
    </v-card>
</template>

<style scoped>
.follower-card {
    background: rgba(255, 255, 255, 0.02);
}
</style>
