<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import { Head } from '@inertiajs/vue3';
import { ref, defineAsyncComponent } from 'vue'
import {Flight, ProfileView, User} from "@/Types/types";
import { router } from '@inertiajs/vue3'
import ProfileViewSwitcher from "@/Components/FlightsGoneBy/ProfileViewSwitcher.vue";
import ProfileLayout from "@/Components/FlightsGoneBy/ProfileLayout.vue";
import DepartureBoard from "@/Components/FlightsGoneBy/DepartureBoard.vue";
import PlaneLoader from "@/Components/FlightsGoneBy/PlaneLoader.vue";

const FlightMapAndCharts = defineAsyncComponent(
    () => import('@/Components/FlightsGoneBy/FlightMapAndCharts.vue')
)
const BoardingPasses = defineAsyncComponent(
    () => import('@/Components/FlightsGoneBy/BoardingPasses.vue')
)

defineOptions({ layout: MainLayout })

const props = defineProps<{
    user: User
    flights: Flight[]
    canEdit: boolean
    initialView?: ProfileView
}>()


const activeView = ref<ProfileView>(props.initialView ?? 'board')

const routeNames = {
    map:    'profile.map',
    board:  'profile.departure-board',
    passes: 'profile.boarding-passes',
} as const

function switchView(view: 'map' | 'board' | 'passes') {
    activeView.value = view
    window.history.replaceState(
        window.history.state,
        '',
        route(routeNames[view], { username: props.user.name })
    )
}
</script>

<template>
    <Head :title="`${user.name}'s Flights`" />
    <ProfileLayout :flights="flights" :user="user">
        <ProfileViewSwitcher :active-view="activeView" @update:active-view="switchView" />
        <DepartureBoard v-if="activeView === 'board'" :flights="flights" :canEdit="canEdit" />
        <BoardingPasses v-else-if="activeView === 'passes'" :flights="flights" :canEdit="canEdit" />
        <FlightMapAndCharts v-else-if="activeView === 'map'" :flights="flights" :canEdit="canEdit" />
    </ProfileLayout>
</template>
