<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 USA from "@/Components/Maps/USA.vue";
defineOptions({ inheritAttrs: false })

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

const countryCode = 'US'
const stateLocalCodes = [
    'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL',
    'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME',
    'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH',
    'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI',
    'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
];

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 US State, plus the District of Colombia.
        </p>
    </Panel>
    <Panel style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
        <PanelHeader centered>Progress</PanelHeader>
        <USA :visitedStates="visitedRegions" :flights="flightsByRegion" style="width: 100%;"/>
        <RegionLegend :visitedRegions="visitedRegions" :stateLocalCodes="stateLocalCodes" :regionNames="regionNames"/>
        <br/>
        <PanelHeader center>Flights By State</PanelHeader>
        <FlightRegionTable
            :regionCodes="stateLocalCodes"
            :regionNames="regionNames"
            :flightsByRegion="flightsByRegion"
        />
    </Panel>
    <Panel>
        <PanelHeader centered>Difficulty</PanelHeader>
        <p>
            This challenge is difficult - primarily due to the sheer number of states, but there are other complicating factors.
        </p>
        <p>
            There are commercial flights to all 50 US States most of the time. Delaware has historically been the only exception to this rule, but more recently Wilmington has been served by low-cost airlines. If there are no commercial flights
            to Delaware while attempting this challenge, you will have to try for a sightseeing flight!
        </p>
        <p>
            Other compounding factors include sheer distance - Alaska and Hawaii might as well be in different countries if you are based on the East Coast.
        </p>
        <p>
            Conversely, the US is really the only domestic aviation market that utilises the hub and spoke model to the extent that it does. This means you will inevitably transit in Atlanta or Dallas, and get a free point towards this challenge.
        </p>
    </Panel>
</template>

<style scoped>

</style>
