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

defineProps<{
    airport: Airport
}>()

function formatElevation(ft: number | null): string | null {
    if (ft === null) return null
    return `${ft.toLocaleString()} ft`
}

</script>

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

        <div class="airport-tooltip">
            <ToolTipHeader>{{ airport.name }}</ToolTipHeader>

                <ToolTipName>
                    <InlineBadge v-if="airport.iata_code" variant="generic">{{ airport.iata_code }}</InlineBadge>
                    <InlineBadge v-if="airport.icao_code" variant="generic">{{ airport.icao_code }}</InlineBadge>
                </ToolTipName>

            <ToolTipDivider />
            <ToolTipRows>
                <ToolTipRow v-if="airport.municipality" label="City" :value="airport.municipality" />
                <CountryRow :country="airport.region?.country" />
                <ToolTipRow v-if="airport.elevation_ft !== null" label="Elevation" :value="formatElevation(airport.elevation_ft)" />
                <ToolTipRow label="Timezone" :value="airport.timezone" />
                <ToolTipRow label="Coordinates" :value="airport.latitude_deg.toFixed(4) + ', ' + airport.longitude_deg.toFixed(4)" />
            </ToolTipRows>
        </div>
    </GlassTooltip>
</template>

<style scoped>
.airport-tooltip {
    display: contents;
}
</style>
