<template>
    <div class="locale-selector">
      <a href="#" @click.prevent.stop="toggle">
        <img class="globe-image" :src="getFlagImage($i18n.locale)" alt="">
        <span>{{ selectedLocale }}</span>
        <img src="@images/arrow-down.svg" alt="">
      </a>
      <div class="options" v-if="active">
        <div class="item" v-for="(value, key) in locales" :key="key" @click.prevent.stop="changeLocale(key)">
          <img class="select-image" :src="getFlagImage(key)" alt="" srcset=""> 
          <span>{{ value }}</span>
        </div>
      </div>
    </div>
</template>

<script>
const locales = {
  de: 'Deutsch',
  en: 'English',
  es: 'Español'
}
export default {
  data() {
    return {
      active: false,
      locales,
    }
  },
  computed: {
    selectedLocale() {
      return this.locales[this.$i18n.locale];
    }
  },
  methods: {
    toggle() {
      this.active = !this.active;
    },
    changeLocale(locale) {
      this.$i18n.locale = locale;
      this.active = false;
    },
    getFlagImage(locale) {
      return this.$helper.getImage(`flag-${locale}.png`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .locale-selector {
    display: inline;
    position: relative;

    .globe-image{
      height: 14px;
    }
    
    .select-image{
      height: 18px;
      margin-right: 8px;
    }

    a {
      display: inline-flex;
      align-items: center;
      color: #fff;
      text-decoration: none;
    }

    img {
      margin-right: 5px;

      &:last-child {
        margin-right: 0;
        margin-left: 5px;
      }
    }
    .options {
      padding: 8px 0 8px;
      display: inline-block;
      width: 120px;
      position: absolute;
      right: 0;
      top: 24px;
      background: #121212;
      border-radius: 5px;
      color: #fefefe;
    }
    .item {
      cursor: pointer;
      padding: 8px 0 8px 12px;
      display: flex;
      align-items: center;

      &:hover {
        color: #FECE16;
        background: #111;
      }
    }
  }
</style>