<template>
  <div class="container">
    <div class="level level-link">
      <Node :dataId="sourceNode.id" :visuals="visuals.node" class="level-left"></Node>
      <div class="level-item" width="auto">
        <Link :dataId="dataId" :vis="{ width: 200, height: 34 }" showArrow />
      </div>
      <Node :dataId="targetNode.id" :visuals="visuals.node" class="level-right"></Node>
    </div>

    <div class="level node-labels" :class="{ bold: visuals.label.isBold, small: visuals.label.isSmall }">
      <div class="level-left">
        <span id="label-right">{{ sourceNode.label }}</span>
      </div>
      <div class="level-right">
        <span id="label-right">{{ targetNode.label }}</span>
      </div>
    </div>
  </div>
</template>

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

export default {
  components: {
    Node, Link
  },

  props: {
    dataId: { type: Number, required: true },
    visuals: {
      type: Object,
      required: false,
      default: function () {
        return { 
          node: { baseNodeRadius: 15, groupNodeRadiusDifference: 3, showLabel: false }, 
          label: { show: false, isBold: false, isSmall: true } 
        }
      }
    },
    allowHover: { type: Boolean, required: false, default: true },
    showOriginalNodes: { type: Boolean, required: false, default: false }
  },

  computed: {
    ...mapState('interaction', ['detailedNode', 'inDebug']),
    ...mapGetters('interaction', ['isShownNodeDetail']),
    ...mapGetters('data', [
      'getNodesInAggregation',
      'getNodesInBundle',
      'getLinkIdsConnectedToNode',
      'getNodeById',
      'getLinkById'
    ]),
    link() {
      return this.getLinkById(this.dataId)
    },
    sourceNode() {
      if (this.showOriginalNodes) return this.getNodeById(this.link.source)
      else return this.getNodeById(getLinkSource(this.link))
    },
    targetNode() {
      if (this.showOriginalNodes) return this.getNodeById(this.link.target)
      else return this.getNodeById(getLinkTarget(this.link))
    },
    linkAttributes() {
      if (this.inDebug) return this.node

      return Object.keys(this.node)
        .filter(key => !['id', 'vis', 'label'].includes(key))
        .reduce((obj, key) => {
          obj[key] = this.node[key]
          return obj
        }, {})
    }
  },

  methods: {
    ...mapActions('interaction', ['hideNodeDetail']),
    ...mapActions('data', ['removeNode', 'ungroupNode', 'unbundleNode'])
  }
}
</script>

<style lang="sass" scoped>
.node-labels
  font-weight: 400
  font-size: 1em
  &.bold
    font-weight: 600
  &.small
    font-size: 0.7em
.level-link
  margin-bottom: 0.15em
</style>
