<template>
  <div>
    <section>
      <h6>Attributes</h6>
      <AttributeTable :attributes="visibleAttributes" :credibility="node.credibility" />

      <!-- only in instanceId 5, and only nodes Brienne (2), Petyr (23) and The Baratheons (40) have assigned pictures -->
      <img v-if="node.photo != null" :src="node.photo" />
    </section>

    <!--<div v-if="isAggregated">
      <section class="limit-height-scrollable">
        <h6 v-if="node.type === 'group'">Group content</h6>
        <h6 v-else-if="node.type === 'alias'">Alias to</h6>
        <h6 v-else>Aggregation</h6>

        <svg>
          <GraphNode
            v-for="n in getNodesInAggregation(instanceId, node.id)"
            :key="`aggr-${n.id}`"
            :node="node"
            :visuals="{
              baseNodeRadius: 11,
              groupNodeRadiusDifference: 2,
              smallLabel: true,
              showLabel: true
            }"
          />
        </svg>
      </section>
      <section class="joined">
        <b-button
          v-if="isAggregated"
          size="is-small"
          type="is-dark"
          @click="
            ungroupNode()
          "
          >Ungroup</b-button
        >
      </section>
    </div>

    <div v-if="isBundle">
      <section class="limit-height-scrollable">
        <h6>Bundled nodes</h6>

        <svg>
          <GraphNode
            v-for="n in getNodesInBundle(instanceId, node.id)"
            :key="`bndl-${n.id}`"
            :data-id="n.id"
            :visuals="{
              baseNodeRadius: 12,
              groupNodeRadiusDifference: 2,
              smallLabel: true,
              showLabel: true
            }"
            :allow-hover="false"
          />
        </svg>
        <b-button
          v-if="isBundle"
          size="is-small"
          type="is-dark"
          @click="
            unbundleNode()
          "
          >Unbundle all</b-button
        >
      </section>
    </div>-->
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { isNodeAggregated, isNodeBundle } from '@/store/modules/data/helpers.js'
import GraphNode from '../GraphNode.vue'
import AttributeTable from '@/components/shared/AttributeTable.vue'

export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components
    GraphNode,
    AttributeTable
  },

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

  computed: {
    ...mapGetters('data', [
      'getNodesInAggregation',
      'getNodesInBundle',
      'getLinkIdsConnectedToNode'
    ]),

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

    isAggregated() {
      return isNodeAggregated(this.node)
    },

    isBundle() {
      return isNodeBundle(this.node)
    }
  },

  methods: {
    ...mapActions('data', {
      _ungroupNode: 'ungroupNode',
      _unbundleNode: 'unbundleNode'
    }),

    ungroupNode() {
      this._ungroupNode({ slotId: this.instanceId, nodeId: this.node.uuid })
    },

    unbundleNode() {
      this._unbundleNode({ slotId: this.instanceId, nodeId: this.node.uuid })
    }
  }
}
</script>

<style lang="sass" scoped>
section:first-of-type
  margin-top: 0
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
    overflow-x: hidden
  &.joined
    margin-top: 0
h6
  font-size: 0.95em
  margin-bottom: 0.65em
  font-weight: 500
p
  margin-top: 1.5em
p:first-of-type
  margin-top: 0.5em
button
  margin-top: 0.3em
.link-pair
  margin-bottom: 1rem

.card
  padding: 1rem
</style>
