<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 {computed} from "vue";
import PanelSubHeader from "@/Components/FlightsGoneBy/Panels/PanelSubHeader.vue";

import FlightRegionTable from "@/Components/FlightsGoneBy/FlightRegionTable.vue";
import {useRegionFlights} from "@/Composables/useRegionFlights";
import China from "@/Components/Maps/China.vue";
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 = 'CN'
const stateLocalCodes = ['11','12', '13', '14', '15', '21', '22', '23', '31', '32', '33', '34', '35', '36', '37', '41', '42', '43', '44', '45', '46', '50', '51', '52', '53', '54', '61', '62', '63', '64', '65',]

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 Chinese Province, Autonomous Region or direct-administered municipality.
        </p>
    </Panel>
    <Panel style="display:flex; flex-direction: column; align-items: center; justify-content: center;">
        <PanelHeader centered>Progress</PanelHeader>
        <China :visitedRegions="visitedRegions" style="width: 100%;"/>
        <RegionLegend :regionNames="regionNames" :visitedRegions="visitedRegions" :stateLocalCodes="stateLocalCodes"/>
        <br/>
        <PanelHeader center>Flights By Region</PanelHeader>
        <FlightRegionTable
            :regionCodes="stateLocalCodes"
            :regionNames="regionNames"
            :flightsByRegion="flightsByRegion"
        />
    </Panel>
    <Panel>
        <PanelHeader centered>Requirements</PanelHeader>
        <p>
            China has 3 different types of administrative regions that are counted in this challenge.
        </p>
        <dl>
            <dt>Province</dt>
            <dd>There are 22 provinces in China.</dd>
            <dt>Autonomous Regions</dt>
            <dd>Not quite provinces as they have a bit more freedom. There are 5 autonomous regions to travel to for this travel.</dd>
            <dt>Direct-Administered Municipality</dt>
            <dd>There are 4 cities big enough to be their own subdivision - Beijing, Chongqing, Shanghai and Tianjin</dd>
        </dl>
        <p>
            For this challenge, the regions are defined as by what would count as a domestic flight in China. Flights to Taiwan and the Special Administrative Regions of Hong Kong and Macau
            do not count towards this challenge as China treats them as international flights. Disputed regions are also not counted.
        </p>
    </Panel>
    <Panel>
        <PanelHeader centered>Difficulty</PanelHeader>
        <p>
            China is very well connected by air, so for the most part getting to a new region is as simple as booking a flight. Basically all regions have multiple airports
            that are well connected to many other regions.
        </p>
        <p>
            The difficulty lies in the number of regions to get to, as well as the extremely good high speed rail in China - it often makes more sense to take the train then to fly.
        </p>
    </Panel>
</template>

<style scoped>
</style>
