<template>
  <b-collapse v-if="isShownNodeSelection" class="card card-right">
    <div slot="trigger" slot-scope="props" class="card-header" role="button">
      <p class="card-header-title">Selection</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="clearCloseNodeSelection"
      ></i>
    </div>

    <div slot="header" class="clearfix">
      <span>Selection</span>
    </div>

    <div class="card-content">
      <div class="content">
        <div>
          <div v-for="node in selectedNodes" :key="node">
            {{ node }}
            <br />
          </div>
        </div>
        <br />

        <div class="buttons">
          <b-button
            :disabled="selectedNodes.length > 1 ? false : true"
            plain
            @click="
            groupNodes(selectedNodes)
            clearCloseNodeSelection()
          "
          >Make group</b-button>

          <b-button
            :disabled="selectedNodes.length > 1 ? false : true"
            plain
            @click="
            aliasNodes(selectedNodes)
            clearCloseNodeSelection()
          "
          >Make alias</b-button>

          <span v-if="isSelectingRepresentativeNode">
            <br />Select representative node for bundle or
            <a @click="isSelectingRepresentativeNode = false">cancel</a>.
          </span>
          <b-button
            v-else
            :disabled="selectedNodes.length === 0"
            plain
            @click="prepareBundle()"
          >Bundle to …</b-button>
        </div>
      </div>
    </div>
  </b-collapse>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      isSelectingRepresentativeNode: false,
      previouslySelectedNodes: []
    }
  },

  computed: {
    ...mapState('interaction', ['selectedNodes']),
    ...mapGetters('interaction', ['isShownNodeSelection'])
  },

  methods: {
    ...mapActions('interaction', ['clearCloseNodeSelection']),
    ...mapActions('data', ['groupNodes', 'aliasNodes', 'bundleNodes']),

    prepareBundle() {
      this.isSelectingRepresentativeNode = true
      this.previouslySelectedNodes = []
      this.selectedNodes.forEach(id => this.previouslySelectedNodes.push(id))
    }
  },

  mounted() {
    this.$store.subscribe(mutation => {
      if (mutation.type === 'interaction/SELECT_NODE' && this.isSelectingRepresentativeNode) {
        this.bundleNodes({
          representativeNodeId: mutation.payload,
          nodeIds: this.previouslySelectedNodes
        })
        this.isSelectingRepresentativeNode = false
        this.clearCloseNodeSelection()
      }
    })
  }
}
</script>

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

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

.el-card__header
  padding: 12px 10px

.item
  margin-bottom: 18px

.clickable-icon
  cursor: pointer

.header-title
  padding: 10px
  margin-top: 50px
  position: relative
  top: 5px

.card-header-btn
  float: right
  padding: 8px 4px

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

.clearfix:after
  clear: both
</style>
