<template>
  <b-collapse v-if="isShownNodeDetail" class="card card-right">
    <div
      slot="trigger"
      slot-scope="props"
      class="card-header"
      role="button"
      aria-controls="contentIdForA11y3"
    >
      <p class="card-header-title">Node detail</p>
      <a class="card-header-icon">
        <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
      </a>

      <i
        class="el-icon-close clickable-icon"
        style="float: right; padding: 3px 0"
        @click="hideNodeDetail"
      ></i>
    </div>

    <div slot="header" class="clearfix">
      <span>Node detail</span>
    </div>

    <div class="card-content">
      <div class="content">
        <BaseIcon :name="node.dataClass" />

        <div>
          <div v-for="(value, propertyName, index) in node" :key="index">
            <b>{{ propertyName }}</b>
            : {{ value }}
            <br />
          </div>
        </div>
        <br />

        <b-button
          type="danger"
          plain
          @click="
            removeNode(node.id)
            hideNodeDetail()
          "
          >Remove</b-button
        >
        <b-button
          v-if="isAggregated"
          plain
          @click="
            ungroupNode(node.id)
            hideNodeDetail()
          "
          >Ungroup</b-button
        >
      </div>
    </div>
  </b-collapse>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import { isNodeAggregated } from '@/store/modules/data.js'

export default {
  computed: {
    node() {
      return this.$store.getters['data/getNodeById'](this.detailedNode)
    },
    isAggregated() {
      return isNodeAggregated(this.node)
    },
    ...mapState('interaction', ['detailedNode']),
    ...mapGetters('interaction', ['isShownNodeDetail'])
  },

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

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

.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>
