<script setup>
import { inject, reactive, watch } from 'vue';

const props = defineProps({
	item: {
		type: Object,
		default: null,
	},
	edits: {
		type: Object,
		default: null,
	},
	editing: {
		type: Set,
		default: null,
	},
});

const emit = defineEmits(['place']);
const pageContext = inject('pageContext');
const countries = pageContext.pageProps.countries;

const place = reactive(props.edits[props.item.key]);

watch(place, () => emit('place', place));

const topCountries = [
	'AU',
	'BR',
	'CZ',
	'DE',
	'JP',
	'RU',
	'GB',
	'US',
];

const sortedCountries = countries.toSorted((countryA, countryB) => topCountries.indexOf(countryB.alpha2) - topCountries.indexOf(countryA.alpha2));
</script>

<template>
	<div
		class="place"
	>
		<div class="value-section">
			<span class="value-label">Country</span>

			<select
				v-model="place.country"
				class="select input"
				placeholder="Country"
				:disabled="!editing.has(item.key)"
			>
				<option
					:key="`${item.key}-country-unknown`"
					:value="null"
				/>

				<option
					v-for="country in sortedCountries"
					:key="`${item.key}-country-${country.alpha2}`"
					:value="country.alpha2"
				>{{ country.alias || country.name }}</option>
			</select>
		</div>

		<div class="value-section">
			<span class="value-label">Place</span>

			<input
				v-model="place.place"
				class="string input"
				:disabled="!editing.has(item.key)"
			>
		</div>
	</div>
</template>
