<script setup lang="ts">
import {Flight, UserActionChange} from "@/Types/types";
import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
import {computed} from "vue";
import GenericFieldChange from "@/Components/FlightsGoneBy/Feed/FieldChanges/GenericFieldChange.vue";

const props = defineProps<{
    change: UserActionChange
    label: string
    original: Flight
    updated: Flight
}>()

const originalAirport = computed(() =>
    props.change.field === 'departure_airport_id'
        ? props.original.departure_airport
        : props.original.arrival_airport
)

const updatedAirport = computed(() =>
    props.change.field === 'departure_airport_id'
        ? props.updated.departure_airport
        : props.updated.arrival_airport
)
</script>

<template>
    <GenericFieldChange :label="label">
        <template #from>
            <AirportToolTip :airport="originalAirport">
                {{ originalAirport.municipality }} ({{originalAirport.display_code}})
            </AirportToolTip>
        </template>
        <template #to>
            <AirportToolTip :airport="updatedAirport">
                {{ updatedAirport.municipality }} ({{updatedAirport.display_code}})
            </AirportToolTip>
        </template>
    </GenericFieldChange>
</template>
<style scoped>

</style>
