<script setup lang="ts">
import { Flight } from "@/Types/types";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import LiveryImage from "@/Components/FlightsGoneBy/Liveries/LiveryImage.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";

defineProps<{
    flight: Flight
}>()
</script>

<template>
    <GlassTooltip>
        <template #activator="{ props: tooltipProps }">
            <div style="display:inline; cursor:pointer" v-bind="tooltipProps">
                <slot />
            </div>
        </template>

        <template #default="{ isActive }">
            <ToolTipHeader>
            <span class="designator">
                <AirlineLogo hideTooltip :airline="flight.airline" size="24" />
                {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
            </span>
            </ToolTipHeader>

            <ToolTipName>
                <InlineBadge variant="generic">{{ flight.departure_airport.display_code }}</InlineBadge>
                <span class="arrow">→</span>
                <InlineBadge variant="generic">{{ flight.arrival_airport.display_code }}</InlineBadge>
            </ToolTipName>


            <ToolTipRows  v-if="isActive.value">
                <FlightMap :flights="[flight]" :showLegend="false" compact />
            </ToolTipRows>

            <ToolTipDivider />

            <ToolTipRows style="min-width: 300px">
                <ToolTipRow label="From" :value="flight.departure_airport.municipality" />
                <ToolTipRow label="To" :value="flight.arrival_airport.municipality" />
                <ToolTipRow label="Airline" :value="flight.airline.name" v-if="flight.airline" />
                <ToolTipRow label="Aircraft" :value="flight.aircraft?.display_name_short" v-if="flight.aircraft" />
                <ToolTipRow label="Date" :value="flight.departure_date_display" />
            </ToolTipRows>
            <ToolTipDivider v-if="flight.livery" />
            <ToolTipRows v-if="flight.livery">
                <LiveryImage :flight="flight" />
            </ToolTipRows>

        </template>
    </GlassTooltip>
</template>

<style scoped>
.designator {
    display:inline-flex;
    color: #e8eaf0;
}

.arrow {
    font-size: 0.75rem;
    color: var(--muted, #445566);
}
</style>
