<script setup lang="ts">
import MainLayout from "@/Layouts/MainLayout.vue";
import {Achievement, Flight, Region, User} from "@/Types/types";
import Panel from "@/Components/FlightsGoneBy/Panels/Panel.vue";
import PanelHeader from "@/Components/FlightsGoneBy/Panels/PanelHeader.vue";
import Australia from "@/Components/Maps/Australia.vue";
import {computed} from "vue";
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";

import FlightRegionTable from "@/Components/FlightsGoneBy/FlightRegionTable.vue";
import {useRegionFlights} from "@/Composables/useRegionFlights";
import RegionLegend from "@/Components/FlightsGoneBy/Panels/RegionLegend.vue";


defineOptions({ layout: MainLayout })
const props = defineProps<{
    achievement: Achievement
    user: User
    isFollowing: boolean
    flights: Flight[]
    regions: Region[]
}>()

const countryCode = 'AU'
const stateLocalCodes = ['WA', 'NSW', 'QLD', 'VIC', 'SA', 'TAS', 'NT', 'ACT']

const { flightsByRegion, visitedRegions, regionNames } = useRegionFlights(
    computed(() => props.flights),
    stateLocalCodes,
    countryCode,
    computed(() => props.regions)
)

</script>

<template>
    <Panel>
        <PanelHeader centered>The Challenge</PanelHeader>
        <p>
            Either take off or land from an airport in each Australian State and Internal Territory.
        </p>
    </Panel>
        <Panel style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
            <PanelHeader centered>Progress</PanelHeader>
            <Australia :visitedStates="visitedRegions" :flights="flightsByRegion" style="width: 100%;"/>
            <RegionLegend :regionNames="regionNames" :visitedRegions="visitedRegions" :stateLocalCodes="stateLocalCodes"/>
            <br/>
            <PanelHeader center>Flights By State</PanelHeader>
            <PanelSubHeader>5 Most Recent Flights By State</PanelSubHeader>
            <FlightRegionTable
                :regionCodes="stateLocalCodes"
                :regionNames="regionNames"
                :flightsByRegion="flightsByRegion"
            />
        </Panel>
        <Panel>
            <PanelHeader centered>Requirements</PanelHeader>
        <p>
           The 8 states and territories you need to visit to complete this challenge are Queensland, Victoria, New South Wales, South Australia, Tasmania, Western Australia, the Northern Territory
            and the Australian Capital Territory.
        </p>

        </Panel>
        <Panel>
            <PanelHeader centered>Difficulty</PanelHeader>
            <p>
                If you happen to be in Australia and have the time, this one is not so difficult to pull off. Australia is roughly the size of the continental United States but
                instead of needing to visit 50 states, you have to visit just 8. The 6 states, and 2 internal territories.
            </p>
            <p>
                All states and territories are reasonably well connected to each other by air and with very few exceptions it is usually possible
                to get from any one state or territory to any other.
            </p>
            <p>
                The capital city of each state acts as the de facto aviation hub for that state, but each state (with the exception of the ACT and South Australia)
                has multiple commercial airports that are served from other states.
            </p>
        </Panel>
</template>

<style scoped>

</style>
