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

const props = defineProps<{
    regionCodes: string[]
    flightsByRegion: Record<string, Flight[]>
    regionNames?: Record<string, string>
}>()

const sortedRegionCodes = computed(() =>
    [...props.regionCodes].sort((a, b) => {
        const nameA = props.regionNames?.[a] ?? a
        const nameB = props.regionNames?.[b] ?? b
        return nameA.localeCompare(nameB)
    })
)
</script>

<template>
    <BadgeTable
        :rows="sortedRegionCodes"
        :rowKey="code => code"
        :hasItems="code => !!flightsByRegion[code]?.length"
    >
        <template #label="{ row: code }">
            {{ regionNames?.[code] ?? code }}
        </template>

        <template #items="{ row: code }">
            <FlightBadge
                v-for="flight in flightsByRegion[code]"
                :key="flight.id"
                :flight="flight"
            />
        </template>
    </BadgeTable>
</template>

<style scoped>

</style>
