<script setup lang="ts">
import { computed } from 'vue'
import { Achievement, Flight, User } from '@/Types/types'
import { useAircraftFamilies } from '@/Composables/useAircraftFamilies'
import Panel from '@/Components/FlightsGoneBy/Panels/Panel.vue'
import PanelHeader from '@/Components/FlightsGoneBy/Panels/PanelHeader.vue'
import BadgeTable from '@/Components/FlightsGoneBy/GenericBadgeTable.vue'
import FlightBadge from '@/Components/FlightsGoneBy/FlightBadge.vue'

defineOptions({ inheritAttrs: false })

const props = defineProps<{
    achievement: Achievement
    user: User
    followStatus: string
    flights: Flight[]
    families: Record<string, string[]>
}>()

const flights = computed(() => props.flights)
const { entries } = useAircraftFamilies(flights, props.families)
</script>

<template>
    <Panel>
        <div class="table-toolbar">
            <PanelHeader>Families</PanelHeader>
        </div>

        <BadgeTable
            :rows="entries"
            :rowKey="entry => entry.family"
            :hasItems="entry => entry.flights.length > 0"
            labelWidth="8em"
        >
            <template #label="{ row: entry }">
                <div class="family-label">
                    <span class="family-name">Airbus {{ entry.family }}</span>
                </div>
            </template>

            <template #items="{ row: entry }">
                <FlightBadge
                    v-for="flight in entry.flights"
                    :key="flight.id"
                    :title="`${flight.departure_airport?.iata_code} → ${flight.arrival_airport?.iata_code}`"
                    :flight="flight"
                />
            </template>
        </BadgeTable>
    </Panel>

    <slot name="extra" />

    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            To complete this challenge you must fly on at least one aircraft from every
            Airbus A3xx family — the A300, A310, A318, A319, A320, A321, A330, A340, A350,
            and A380.
        </p>
        <p>
            Any variant within a family counts. For example, an Airbus A320neo (A20N) and
            a classic A320 both satisfy the A320 family requirement.
        </p>
    </Panel>
    <Panel>
        <PanelHeader centered>Difficulty</PanelHeader>
        <p>
            If you are starting this challenge today, then this challenge is near-impossible to complete and will soon be impossible. At the time of writing, the following aircraft are very hard to fly on:
        </p>
        <ul>
            <li><b>Airbus A300</b> - Only in service in Iran, mostly domestically. Very hard to arrange.</li>
            <li><b>Airbus A310</b> - In commercial service in Iran and Afghanistan. Afghanistan is far less sanctioned, so easier to book a flight. Dubai to Kabul is a reliabe route to see the A310. An A310 also acts as a vomit comet in Europe</li>
            <li><b>Airbus A318</b> - Very few left operating for Air France. Will likely be retired before you have read this.</li>
            <li><b>Airbus A340</b> - Rapidly being retired from service in the western world with Lufthansa being the last hold out (at time of writing). Iran and Venezuela are likely to hold on to them for sometime. South African always seems to bring them back into service too. A few more scattered around in charter or smaller national airlines</li>
        </ul>
    </Panel>
</template>

<style scoped>


.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.family-label {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 0.25rem;
}

.family-name {
    font-size: 0.9rem;
    font-weight: 500;
}
</style>
