<script setup lang="ts">
import {computed, ref} from "vue";
import {Flight, User} from "@/Types/types";
import {router} from "@inertiajs/vue3";

defineProps<{
    profileUser: User
    flight: Flight
    canEdit: boolean
    referrer?: "departure-board" | "boarding-passes"
}>()

const deleting = ref(false)
function editRoute(id: number) {
    return route('flights.edit', { flight: id })
}

const flightToDelete = ref<Flight | null>(null)
const showDeleteDialog = computed({
    get: () => flightToDelete.value !== null,
    set: (val) => { if (!val) flightToDelete.value = null }
})

</script>

<template>
    <v-menu>
        <template #activator="{ props: menuProps }">
            <v-btn
                v-bind="menuProps"
                icon="mdi-dots-horizontal"
                variant="text"
                size="small"
                density="compact"
            />
        </template>
        <v-list density="compact" bg-color="#1a1e2e">
            <v-list-item
                prepend-icon="mdi-magnify"
                title="View Details"
                :href="route('profile.flight', { userFlight: flight.id, user: profileUser.name  })"
            />
            <v-list-item v-if="canEdit"
                         prepend-icon="mdi-pencil-outline"
                         title="Edit"
                         :href="editRoute(flight.id)"
            />
            <v-list-item v-if="canEdit"
                         prepend-icon="mdi-trash-can-outline"
                         title="Delete"
                         @click="flightToDelete = flight"
            />

        </v-list>
    </v-menu>
    <v-dialog v-if="canEdit" v-model="showDeleteDialog" max-width="400">
        <v-card title="Delete Flight">
            <v-card-text>Are you sure you want to delete this flight?</v-card-text>
            <v-card-actions>
                <v-spacer />
                <v-btn v-if="!deleting" @click="flightToDelete = null">Cancel</v-btn>
                <v-btn
                    color="error"
                    :loading="deleting"
                    @click="deleting = true; router.delete(
                        route('flights.delete', { flight: flightToDelete!.id , referrer: referrer ?? 'departure-board'}),
                        { onFinish: () => { deleting = false; flightToDelete = null } }
                    )"
                >
                    Delete
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<style scoped>

</style>
