<template>
  <BaseCollapsibleCard v-if="isShownLinkDetail">
    <template #header-title>Link detail</template>
    <template #header-right>
      <div style="float: right; position: relative; right: 15px; top: 11px" @click="hideLinkDetail">
        x
      </div>
    </template>

    <template #content>
      <section>
        <LinkedNodesPair
          :dataId="link.id"
          :visuals="{
            node: { baseNodeRadius: 15, groupNodeRadiusDifference: 3, showLabel: false },
            label: { show: true, isBold: isMultilink }
          }"
        ></LinkedNodesPair>
      </section>

      <section v-if="Object.keys(attributes).length">
        <h6>Attributes</h6>
        <div v-for="(value, propertyName, index) in attributes" :key="index">
          <span class="property-name">{{ propertyName }}</span>
          : {{ value }}
          <br />
        </div>
      </section>

      <section class="container limit-height-scrollable" v-if="multilinkLinks.length > 0">
        <div class="level link-level" v-for="link in multilinkLinks" :key="link.id">
          <div class="level-item">
            <LinkedNodesPair
              v-if="isLinkTransferred(link)"
              class="nodes-pair"
              :dataId="link.id"
              showOriginalNodes
            ></LinkedNodesPair>
            <Link v-else :dataId="link.id" :vis="{ width: 200, height: 30 }" showArrow />
          </div>
        </div>
      </section>
    </template>
  </BaseCollapsibleCard>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { isMultilink, isLinkTransferred } from '@/store/modules/data.store.js'
import LinkedNodesPair from '@/components/Tools/Node/LinkedNodesPair.vue'
import Link from '@/components/Tools/Node/Link.vue'

export default {
  components: {
    Link,
    LinkedNodesPair
  },

  computed: {
    ...mapState('interaction', ['detailedLink', 'inDebug']),
    ...mapGetters('interaction', ['isShownLinkDetail']),
    ...mapGetters('data', ['getMultilinkLinks']),

    link() {
      return this.$store.getters['data/getLinkById'](this.detailedLink)
    },
    sourceNode() {
      return this.$store.getters['data/getNodeById'](this.link.source)
    },
    targetNode() {
      return this.$store.getters['data/getNodeById'](this.link.target)
    },
    attributes() {
      if (this.inDebug) return this.link

      return Object.keys(this.link)
        .filter(key => !['id', 'vis', 'source', 'target', 'direction', 'description'].includes(key))
        .reduce((obj, key) => {
          obj[key] = this.link[key]
          return obj
        }, {})
    },
    multilinkLinks() {
      if (!isMultilink(this.link)) return []
      return this.getMultilinkLinks(this.link.id)
    },
    isMultilink() {
      return isMultilink(this.link)
    }
  },

  methods: {
    ...mapActions('interaction', ['hideLinkDetail']),
    isLinkTransferred(link) {
      return isLinkTransferred(link, this.$store)
    }
  }
}
</script>

<style lang="sass" scoped>
@import ../_workspace

.level
  &#link-pair,
  &.link-level
    margin-bottom: 0.2rem
    .level-item .nodes-pair
      margin-bottom: 0.8rem
  &.link-level:last-of-type .level-item .container.nodes-pair
    margin-bottom: 0

h6
  font-size: 0.95em
  margin-bottom: 0.65em
section:first-of-type
  margin-top: 0.6em
  margin-bottom: 2em
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
h6
  font-size: 0.95em
  margin-bottom: 0.65em
</style>
