<script setup lang="ts">
import { computed } from 'vue'
import { FlightStats } from "@/Composables/useFlightStats"
import ScrollingHorizontalBarChart from "@/Components/FlightsGoneBy/Charts/ChartTypes/ScrollingHorizontalBarChart.vue"
import ChartTooltip from "@/Components/FlightsGoneBy/Charts/ChartTooltip.vue"
import { useChartTooltip } from "@/Composables/useChartTooltip"

interface RouteItem {
    label: string
    depLabel: string
    arrLabel: string
    past: number
    upcoming: number
}

const props = defineProps<{
    flightStats: FlightStats
}>()

const { tooltipItem, tooltipX, tooltipY, onMouseMove, onMouseLeave } = useChartTooltip<RouteItem>()

const routes = computed(() => props.flightStats.topRoutes.value.routes)
const series = computed(() => props.flightStats.topRoutes.value.series)
</script>

<template>
    <ScrollingHorizontalBarChart
        title="Top Routes"
        :series="series"
        :categories="routes.map(r => r.label)"
        :footer-value="routes.length"
        footer-label="total routes"
        :max-visible="12"
        :limit="12"
    >
        <template #tooltip="{ visible, x, y, index }">
            <ChartTooltip :visible="visible" :x="x" :y="y">
                <div class="ct-name">{{ index !== null ? routes[index].label : '' }}</div>
                <div class="ct-row">
                    <span class="ct-label">Flights</span>
                    <span class="ct-val">{{ index !== null ? routes[index].past : '' }}</span>
                </div>
                <div v-if="index !== null && routes[index].upcoming" class="ct-row">
                    <span class="ct-label">Upcoming</span>
                    <span class="ct-val">{{ routes[index].upcoming }}</span>
                </div>
            </ChartTooltip>
        </template>
    </ScrollingHorizontalBarChart>
</template>
