<script setup lang="ts">
import {Airline, SharedProps} from "@/Types/types";
import {computed} from "vue";
import {usePage} from "@inertiajs/vue3";
import GlassTooltip from "@/Components/FlightsGoneBy/GlassTooltip.vue";
import InlineBadge from "@/Components/FlightsGoneBy/InlineBadge.vue";
import AllianceLogo from "@/Components/FlightsGoneBy/AllianceLogo.vue";

const page = usePage<SharedProps>().props;

const props = defineProps<{
    airline: Airline | null;
    size?: number | string;
    hideTooltip?: boolean;
}>();

const logoUrl = computed(() => `url('${props.airline?.logo_url ?? page.logo_api_url+'/airline/undefined/logo/tail'}')`);
const logoStyle = computed(() => ({
    width: size.value,
    height: size.value,
    backgroundImage: logoUrl.value,
    backgroundSize: 'contain',
    backgroundRepeat: 'no-repeat',
    display: 'inline-block',
}));
const size = computed(() => props.size ? props.size + 'px' : '30px');
</script>

<template>
    <GlassTooltip v-if="!hideTooltip">
        <template #activator="{ props: tooltipProps }">
            <span class="airline-logo" v-bind="tooltipProps"></span>
        </template>

        <div v-if="airline" class="airline-tooltip-content">
            <div class="tooltip-header">
                <div class="logo-title">
                    <span class="airline-logo-tooltip" :style="logoStyle"></span>
                    <span class="airline-name">{{ airline.name }}</span>
                </div>
                <div v-if="airline.IATA_code || airline.ICAO_code" class="codes">
                    <InlineBadge v-if="airline.IATA_code" variant="generic">{{ airline.IATA_code }}</InlineBadge>
                    <InlineBadge v-if="airline.ICAO_code" variant="generic">{{ airline.ICAO_code }}</InlineBadge>
                    <AllianceLogo v-if="airline?.alliance" :alliance="airline?.alliance" size="24" />
                </div>
            </div>
            <div class="tooltip-divider"></div>
            <div class="tooltip-meta">
                <span
                    v-if="airline.country"
                    :class="`fi fi-${airline.country.code.toLowerCase()}`"
                    class="country-flag"
                ></span>
                <span v-if="airline.country" class="country-name">{{ airline.country.name }}</span>
            </div>
        </div>
    </GlassTooltip>
    <span v-else class="airline-logo"></span>
</template>

<style scoped>
span.airline-logo {
    width: v-bind(size);
    height: v-bind(size);
    background-image: v-bind(logoUrl);
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.airline-tooltip-content {
    display: contents;
}

.logo-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.codes{
    width:100%;
    display: flex;
    gap: 4px;
    padding-top:1em;
    justify-content:flex-start;
}


.airline-name {
    letter-spacing: 0.03em;
}

.tooltip-divider {
    height: 1px;
    background: var(--table-border);
}

.tooltip-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
}

.country-flag {
    font-size: 1rem;
}

.country-name {
    flex: 1;
    font-size: 0.8rem;
}

.codes {
    display: flex;
    gap: 4px;
    margin-left: auto;
}

</style>
