<template>
    <select class="c-select" :name="name" :id="id" v-model="internalSelected" @change="changed" :data-test="name">
        <option disabled>Kies een land</option>
        <option v-for="regionInfo in regionInfoData" :value="regionInfo.threeLetterISORegionName">
            {{ regionInfo.nativeName || regionInfo.displayName }}
        </option>
    </select>
</template>

<script>
    import {mapState} from "vuex";

    export default {
        props: {
            name: {type: String, required: true},
            id: {type: String, default: ''},
            selected: {type: String, required: false}
        },

        data: function () {
            return {
                internalSelected: this.selected
            }
        },
        computed: {
            ...mapState({
                regionInfoData: state => state.g11n.regionInfo.neutral

            }),
        },
        methods: {
            error: function (error) {
                console.error('RegionSelect:', error);
            },

            changed: function (event) {
                this.$emit('change', event.target.value);
            },
        },
        created: async function () {
            this.$store.dispatch('g11n/regionInfo/loadNeutral');
            if (!this.internalSelected) {
                this.$store.dispatch('g11n/config/loadConfigs', ['shop.country_hotlist_default']).then(() => {
                    this.internalSelected = this.$store.state.g11n.config.configs["shop.country_hotlist_default"];
                    this.$emit('change', this.internalSelected);
                }).catch((error) => {});
            }
        },
    };
</script>