<template>
  <select-base
    :options="options"
    :loading="loading"
    use-input="10"
    v-bind="$attrs"
    option-value="id"
    option-label="name"
    v-on="$listeners"
  />
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import SelectBase from './select-base.vue';
import sortBy from 'lodash/sortBy';
import { RegionApi, Region } from '@openapi/idm';
import { notifyError } from '@utils/notify';

const regionApi = new RegionApi();

@Component({
  inheritAttrs: false,
  components: { SelectBase },
})
export default class SelectRegions extends Vue {
  protected options = [] as Region[];
  protected loading = true;

  protected async created(): Promise<void> {
    this.options = (await regionApi
      .searchRegions()
      .then(({ data }) => data)
      .catch((e) => {
        notifyError(e.message.toString());

        return [];
      }) as unknown) as Region[];
    this.options = sortBy(this.options, el => el.name?.toLowerCase().trim());
    this.loading = false;
  }
}
</script>
