<template>
  <span v-if="item">{{ value }}</span>
</template>

<style lang="scss" scoped>
span {
  white-space: nowrap;
}
</style>

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

export default {
  props: ['item', 'display-field', 'relationItemSchema'],
  computed: {
    ...mapState('translations', ['languageInfos']),
    value() {
      const displayFieldValue = this.item[this.displayField];

      if (!this.item.language || !this.relationItemSchema.isTranslatable || this.languageInfos.length <= 1) {
        return displayFieldValue;
      } else {
        const languageInfo = this.languageInfos.find((l) => l.language === this.item.language);
        const displayFieldLanguage = languageInfo && this.languageInfos.length > 1 ? languageInfo.displayName : this.item.language;

        return `${displayFieldValue} - ${displayFieldLanguage}`;
      }
    }
  }
};
</script>
