<template>
  <div>
    <!-- attributes -->
    <section v-if="Object.keys(visibleAttributes).length > 0">
      <header>Attributes</header>
      <AttributeTable :attributes="visibleAttributes" />
    </section>
    <section v-else>
      No attributes set.
    </section>

    <!-- list of singlelinks when multilink -->
    <section v-if="isMultilink">
      <header>Contained links</header>
      <p v-for="link in containedSinglelinks" :key="link.uuid">
        {{ link.properties.get('description') }}
      </p>
    </section>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import AttributeTable from '@/components/shared/AttributeTable.vue'
import { isMultilink } from '@/store/modules/data/helpers.js'

export default {
  components: {
    AttributeTable
  },

  props: {
    instanceId: {
      type: Number,
      required: true
    },
    link: {
      type: Object,
      required: true
    }
  },

  computed: {
    ...mapGetters('data', {
      _getMultilinkLinks: 'getMultilinkLinks'
    }),

    isMultilink() {
      return isMultilink(this.link)
    },

    visibleAttributes() {
      if (this.inDebug) return this.link
      return Object.fromEntries(this.link.properties)
    },

    containedSinglelinks() {
      if (!this.isMultilink) return []
      return this._getMultilinkLinks()(this.instanceId, this.link.uuid)
    }
  }
}
</script>

<style lang="sass" scoped>
section
  font-size: 0.9em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
    overflow-x: hidden
  header
    margin-top: 1em
    font-size: 0.95em
    margin-bottom: 0.35em
    font-weight: 500
button
  margin-top: 0.3em
.link-pair
  margin-bottom: 1rem
</style>
