<script setup lang="ts">
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'
import { SharedProps } from '@/Types/types'
import { ref, onMounted, nextTick } from 'vue'

import { FlightStats } from '@/Composables/useFlightStats'
import FlightMap from "@/Components/FlightsGoneBy/FlightMap.vue";
import FlightFilter from "@/Components/FlightsGoneBy/FlightFilter.vue";
import FlightStatsBar from "@/Components/FlightsGoneBy/FlightStatsBar.vue";
import FlightCharts from "@/Components/FlightsGoneBy/FlightCharts.vue";
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";
const props = defineProps<{
    stats: FlightStats
    canEdit: boolean
}>()

const emit = defineEmits<{
    filtersChange: [filters: {
        years: number[]
        airlines: number[]
        countries: string[]
        continents: string[]
        flightClasses: number[]
    }]
}>()

const chartsVisible = ref(false)
onMounted(async () => {
    setTimeout(() => { chartsVisible.value = true }, 1)
})

const mappedFlights = computed(() => [
    ...props.stats.pastFlights.value,
    ...props.stats.upcomingFlights.value,
])
</script>

<template>
    <div>
    <FlightMap :flights="mappedFlights" />
    <FlightFilter :flights="mappedFlights" @change="$emit('filtersChange', $event)" />
    <FlightStatsBar :flights="stats.pastFlights.value" :upcoming-flights="stats.upcomingFlights.value" />
    <FlightCharts v-if="chartsVisible" :stats="stats"  :flight-stats="stats"/>
    <div v-else style="width:100%; display:flex; align-items: center;justify-content: center">
        <PlaneLoader />
    </div>
    </div>
</template>
