<script>
import { markRaw } from 'vue'

import HorizontalInfoListing from '@inside-library/components/listing/HorizontalInfoListing'
import ExperienceDownloadButton from './ExperienceDownloadButton'

export default {
  name: 'ExperienceHeaderInfos',
  extends: HorizontalInfoListing,
  $_i18nRootPath: 'customs.EXPERIENCE_PAGE.HEADER_INFOS',
  data() {
    return {
      selection: {
        year: 'year.data',
        categories: 'experience_categories.data',
        companies: 'business.data',
        keywords: 'keywords',
        file: 'file',
        uuid: 'uuid'
      }
    }
  },
  methods: {
    $_scaffold(fields) {
      return [
        ...this.$_insertIf(!!fields.categories.length, {
          label: this.$_tr('labels.theme'),
          class: 'border theme',
          value: fields.categories.map(({ title }) => title).join(', ')
        }),
        {
          label: this.$_tr('labels.year'),
          value: fields.year,
          class: 'border'
        },
        ...this.$_insertIf(!!fields.companies.length, {
          label: this.$_tr('labels.company'),
          class: 'border company',
          value: fields.companies.map(({ title }) => title).join(', ')
        }),
        {
          label: this.$_tr('labels.keywords'),
          class: 'border keywords',
          value: fields.keywords
        },
        {
          tag: markRaw(ExperienceDownloadButton),
          data: { uuid: fields.uuid }
        }
      ]
    }
  }
}
</script>
