<template>
  <div
    class="ws-app-bar-locale-select"
    v-click-outside="$_onClickOutside"
  >
    <div
      @click="$_onButtonClick()"
      class="ws-app-bar-locale-select__button"
    >
      <v-icon class="icon">mdi-web</v-icon>
      <div class="text">{{_selectingLocaleName}}</div>
    </div>
    <div
      v-if="_locales&&menuActive"
      class="ws-app-bar-locale-select__options"
    >
      <a
        v-for="(option,optionIndex) in _locales"
        :key="optionIndex"
        @click.prevent="$_onOptionClick(option)"
      >{{option.name}}</a>
    </div>
  </div>
</template>

<script>
import ClickOutside from "vue-click-outside";
export default {
  data: () => ({
    menuActive: false,
  }),
  methods: {
    $_onButtonClick() {
      this.menuActive = !this.menuActive;
    },
    $_onOptionClick(option) {
      this.$store.dispatch("locale/setSelectingLocale", option.code);
      this.menuActive = false;
    },
    $_onClickOutside() {
      this.menuActive = false;
    },
  },
  computed: {
    _selectingLocaleName() {
      if (!this._locales || !this._selectingLocale) {
        return "Language";
      } else {
        const tarLocale = this._locales.find((e) => {
          return e.code == this._selectingLocale;
        });
        if (!tarLocale) {
          return "Language";
        } else {
          return tarLocale.name;
        }
      }
    },
    _selectingLocale() {
      return this.$store.state.locale.selectingLocale;
    },
    _locales() {
      return this.$store.state.locale.locales;
    },
  },
  directives: {
    ClickOutside,
  },
};
</script>


<style lang="scss">
@import "../assets/scss/ws-app-bar-locale-select.scss";
</style>