<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";
import ToolTipHeader from "@/Components/FlightsGoneBy/Tooltips/ToolTipHeader.vue";
import ToolTipDivider from "@/Components/FlightsGoneBy/Tooltips/ToolTipDivider.vue";
import ToolTipName from "@/Components/FlightsGoneBy/Tooltips/ToolTipName.vue";
import ToolTipRows from "@/Components/FlightsGoneBy/Tooltips/ToolTipRows.vue";
import ToolTipRow from "@/Components/FlightsGoneBy/Tooltips/ToolTipRow.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="airline && !hideTooltip">
        <template #activator="{ props: tooltipProps }">
            <span class="airline-logo" v-bind="tooltipProps"></span>
        </template>

        <div class="airline-tooltip-content">
            <ToolTipHeader>
                <div class="logo-title">
                    <span class="airline-logo-tooltip" :style="logoStyle"></span>
                    <span class="airline-name">{{ airline.name }}</span>
                </div>
            </ToolTipHeader>
            <ToolTipName v-if="airline.iata_code || airline.icao_code">
                    <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" />
            </ToolTipName>
           <ToolTipDivider />
            <ToolTipRows v-if="airline.country">
                <ToolTipRow label="Country" :value="airline.country.name" :countryCode="airline.country.code" />
            </ToolTipRows>
        </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;
}
</style>
