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

const loggedInUser = usePage<SharedProps>().props.auth.user?.id

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 }
})

function copyFlightToClipboard(flight: Flight) {
    const dep = `${flight.departure_airport.display_code} (${flight.departure_airport.municipality})`
    const arr = `${flight.arrival_airport.display_code} (${flight.arrival_airport.municipality})`
    const dayDiff = flight.arrival_day_difference !== 0
        ? `(${flight.arrival_day_difference > 0 ? '+' : ''}${flight.arrival_day_difference})`
        : ''
    const times = `${flight.departure_time_display} → ${flight.arrival_time_display} ${dayDiff}`
    const airline = flight.airline?.display_name
    const aircraft = flight.aircraft?.display_name
    const reg = flight.aircraft_registration ? `· (${flight.aircraft_registration})` : ''
    const text = `${flight.departure_date_display} | ${flight.flight_number} | ${airline} | ${dep} → ${arr}  | ${times} | ${aircraft} ${reg}`
    copyToClipboard(text)
}


</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="loggedInUser && loggedInUser !== profileUser.id"
                prepend-icon="mdi-plus"
                title="Log Flight for Myself"
                :href="route('flights.copy', { flight: flight.id })"
            />
            <v-list-item
                prepend-icon="mdi-content-copy"
                title="Copy to Clipboard"
                @click="copyFlightToClipboard(flight)"
            />
            <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>
