<template>
    <div class="flight-charts glass">
        <FlightsPerYearChart :flights="flights" :upcoming-flights="upcomingFlights"/>
    </div>
    <div class="flight-charts glass">
        <FlightsPerMonthChart :flights="flights" :upcoming-flights="upcomingFlights" />
    </div>
    <div class="flight-charts glass charts-row">
        <FlightReasonsChart :flights="[...flights, ...upcomingFlights]" />
        <FlightClassChart :flights="[...flights, ...upcomingFlights]"  />
        <SeatTypeChart :flights="[...flights, ...upcomingFlights]"  />
    </div>
    <div class="flight-charts glass charts-row">
        <CountriesChart :flights="flights" :upcoming-flights="upcomingFlights" />
    </div>
    <div class="flight-charts glass charts-row">
        <TopAirlinesChart :flights="flights" :upcoming-flights="upcomingFlights" />
    </div>
    <div class="flight-charts glass charts-row">
        <TopAirportsChart :flights="flights" :upcoming-flights="upcomingFlights" />
    </div>
    <div class="flight-charts glass charts-row">
        <TopRoutesChart :flights="flights" :upcoming-flights="upcomingFlights" />
    </div>
</template>

<script setup lang="ts">
import type { Flight } from '@/Types/types'
import FlightsPerYearChart from "@/Components/FlightsGoneBy/Charts/FlightsPerYearChart.vue";
import FlightsPerMonthChart from "@/Components/FlightsGoneBy/Charts/FlightsPerMonthChart.vue";
import FlightReasonsChart from "@/Components/FlightsGoneBy/Charts/FlightReasonsChart.vue";
import FlightClassChart from "@/Components/FlightsGoneBy/Charts/FlightClassChart.vue";
import SeatTypeChart from "@/Components/FlightsGoneBy/Charts/SeatTypeChart.vue";
import CountriesChart from "@/Components/FlightsGoneBy/Charts/CountriesChart.vue";
import TopAirlinesChart from "@/Components/FlightsGoneBy/Charts/TopAirlinesChart.vue";
import TopAirportsChart from "@/Components/FlightsGoneBy/Charts/TopAirportsChart.vue";
import TopRoutesChart from "@/Components/FlightsGoneBy/Charts/TopRoutesChart.vue";

defineProps<{
    flights: Flight[]
    upcomingFlights: Flight[]
}>()
</script>

<style scoped>
.flight-charts {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
    border-radius: 10px;
    margin-top: 12px;
}

.charts-row {
    flex-direction: row;
    align-items: flex-start;
}

.charts-row > :deep(*) {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .charts-row {
        flex-direction: column;
    }

    .charts-row > :deep(*) {
        width: 100%;
    }
}
</style>
