<template>
  <BaseCollapsibleCard v-if="isShownNodeDetail">
    <template #header-title>Detail</template>
    <template #header-right>
      <i
        class="el-icon-close clickable-icon"
        style="float: right; padding: 3px 0"
        @click="hideNodeDetail"
      ></i>
    </template>

    <template #content>
      <Node :dataId="node.id" :visuals="{baseNodeRadius: 14, groupNodeRadiusDifference: 3 }"></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 v-if="isAggregated" class="aggr-section">
        <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}`"
          :dataId="node.id"
          :visuals="{ baseNodeRadius: 11, groupNodeRadiusDifference: 2, smallLabel: true }"
          :allowHover="false"
        ></Node>
        <b-button
          v-if="isAggregated"
          size="is-small"
          type="is-dark"
          @click="
              ungroupNode(node.id)
              hideNodeDetail()
            "
        >Ungroup</b-button>
      </section>

      <section v-if="isBundle" class="aggr-section">
        <h6>Bundled nodes</h6>

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

      <!--<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'

export default {
  components: {
    Node
  },

  computed: {
    ...mapState('interaction', ['detailedNode', 'inDebug']),
    ...mapGetters('interaction', ['isShownNodeDetail']),
    ...mapGetters('data', ['getNodesInAggregation', 'getNodesInBundle']),
    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
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

.card-right
  width: $card-right-width
  margin-bottom: 20px

.item
  margin-bottom: 18px

.clickable-icon
  cursor: pointer

.clearfix:before,
.clearfix:after
  display: table
  content: ''

.clearfix:after
  clear: both
</style>
