<script setup lang="ts">
import {Flight} from "@/Types/types";
import FlightToolTip from "@/Components/FlightsGoneBy/FlightToolTip.vue";
import AirlineLogo from "@/Components/FlightsGoneBy/AirlineLogo.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";

defineProps<{
    regionCodes: string[]
    flightsByRegion: Record<string, Flight[]>
    regionNames?: Record<string, string>
}>()
</script>

<template>
    <table>
        <tr v-for="code in regionCodes" :key="code">
            <td>{{ regionNames?.[code] ?? code }}</td>
            <td>
                <template v-if="flightsByRegion[code]?.length">
                    <span style="display:inline-flex; align-items:center; gap:0.25em; flex-wrap:wrap;">
                        <FlightToolTip
                            v-for="(flight, index) in flightsByRegion[code].slice(0, 5)"
                            :key="flight.id"
                            :flight="flight"
                        >
                            <InlineBadge style="display:inline-flex; align-items:center; gap:0.25em;">
                                <AirlineLogo hideTooltip :airline="flight.airline" />
                                {{ flight.flight_number || `${flight.departure_airport.display_code}-${flight.arrival_airport.display_code}` }}
                            </InlineBadge>
                        </FlightToolTip>
                    </span>
                </template>
                <template v-else>
                </template>
            </td>
        </tr>
    </table>
</template>

<style scoped>
table {
    border-spacing: 0;
    width: 100%;
}
table td {
    border: solid 1px;
    padding: 0.5em;
}
</style>
