<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";
import Canada from "@/Components/Maps/Canada.vue";


defineOptions({ inheritAttrs: false })
const props = defineProps<{
    achievement: Achievement
    user: User
    followStatus: string
    flights: Flight[]
    regions: Region[]
}>()

const countryCode = 'CA'
const stateLocalCodes = [
    'AB', 'BC', 'MB', 'NB', 'NL', 'NS', 'NT', 'NU', 'ON', 'PE',
    'QC', 'SK', 'YT'
];

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 Canadian Province and Territory.
        </p>
    </Panel>
    <Panel style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
        <PanelHeader centered>Progress</PanelHeader>
        <Canada :visitedStates="visitedRegions" :flights="flightsByRegion" style="width: 100%;"/>
        <RegionLegend :regionNames="regionNames" :visitedRegions="visitedRegions" :stateLocalCodes="stateLocalCodes"/>
        <br/>
        <PanelHeader centered>Flights By Province</PanelHeader>
        <FlightRegionTable
            :regionCodes="stateLocalCodes"
            :regionNames="regionNames"
            :flightsByRegion="flightsByRegion"
        />
    </Panel>
    <Panel>
        <PanelHeader centered>Difficulty</PanelHeader>
        <p>
            This challenge is not extremely difficult but Canada's geography does complicate it and it could get expensive!
        </p>
        <p>
            Canada's population is all in the South, so visiting the Northwest Territories, Yukon and Nanavut will likely require doubling back south to get connecting flights.
        </p>
        <p>
            At least the capital of Ottawa is in Ontario - so there's no need to be chasing a special capital district like in Brazil, the US or Australia.
        </p>
    </Panel>
</template>

<style scoped>

</style>
