<template>
  <div class="translation-buttons">
    <div>
      <dropdown-menu
        label="Ga naar vertaling"
        buttonClass="btn-secondary mr-2"
        dropdownName="translateItem"
        :disabled="translateds.length === 0"
      >
        <ul class="list-unstyled m-0">
          <li v-for="translated in translateds" :key="translated.id">
            <button v-on:click="goToTranslation(translated)" type="button" class="dropdown-item">
              {{ translated.languageInfo.displayName }}
            </button>
          </li>
        </ul>
      </dropdown-menu>
    </div>

    <div>
      <dropdown-menu
        label="Vertaal naar"
        buttonClass="btn-secondary mr-2"
        dropdownName="translateItem"
        :disabled="translatables.length === 0"
      >
        <ul class="list-unstyled m-0">
          <li v-for="translatable in translatables" :key="translatable.languageInfo.language">
            <button v-on:click="createTranslation(translatable)" type="button" class="dropdown-item">
              {{ translatable.languageInfo.displayName }}
            </button>
          </li>
        </ul>
      </dropdown-menu>
    </div>
  </div>
</template>

<style scoped>
.translation-buttons {
  display: flex;
}
</style>

<script>
export default {
  props: {
    itemId: {
      type: String,
      required: true
    },
    translations: {
      type: Array,
      required: true
    }
  },
  computed: {
    translatables() {
      return this.translations.filter((t) => !t.id);
    },
    translateds() {
      return this.translations.filter((t) => t.id && t.id !== this.itemId);
    }
  },
  methods: {
    createTranslation(translatable) {
      this.$emit('translate', translatable.languageInfo);
    },
    goToTranslation(translatable) {
      this.$emit('goToTranslation', translatable.id);
    }
  }
};
</script>
