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

    <template #content>
      <Node
        :data-id="node.id"
        :visuals="{ baseNodeRadius: 14, groupNodeRadiusDifference: 3, showLabel: true }"
      ></Node>

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

      <section class="limit-height-scrollable">
        <h6>Connections</h6>

        <LinkedNodesPair
          v-for="id in getLinkIdsConnectedToNode(node.id)"
          :key="id"
          :data-id="id"
          :visuals="{
            node: {
              baseNodeRadius: 15,
              groupNodeRadiusDifference: 3,
              showLabel: false,
              smallLabel: true,
              maxLength: 12
            },
            label: { show: false, isBold: false, isSmall: true }
          }"
          :allow-hover="true"
        ></LinkedNodesPair>
      </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>

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

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

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

      <!--<div class="buttons">
        <b-button
          type="danger"
          disabled
          plain
          @click="
              removeNode(node.id)
              hideNodeDetail()
            "
        >Remove</b-button>
      </div>-->
    </template>
  </BaseCollapsibleCard>
</template>

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

export default {
  components: {
    Node,
    LinkedNodesPair
  },

  computed: {
    ...mapState('interaction', ['detailedNode', 'inDebug']),
    ...mapGetters('interaction', ['isShownNodeDetail']),
    ...mapGetters('data', [
      'getNodesInAggregation',
      'getNodesInBundle',
      'getLinkIdsConnectedToNode'
    ]),
    node() {
      return this.$store.getters['data/getNodeById'](this.detailedNode)
    },
    nodeAttributes() {
      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
        }, {})
    },
    isAggregated() {
      return isNodeAggregated(this.node)
    },
    isBundle() {
      return isNodeBundle(this.node)
    }
  },

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

<style lang="sass" scoped>
@import ../_workspace
section:first-of-type
  margin-top: 0.6em
section
  font-size: 0.9em
  margin-top: 1.4em
  &.limit-height-scrollable
    max-height: 20em
    overflow-y: auto
  &.joined
    margin-top: 0
h6
  font-size: 0.95em
  margin-bottom: 0.65em
p
  margin-top: 1.5em
p:first-of-type
  margin-top: 0.5em
button
  margin-top: 0.3em
</style>
