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

    <template #content>
      <section v-if="selectedNodes.length > 0">
        <div
          v-for="node in getNodesByIds(selectedNodes)"
          :key="`${node.id}`"
          @click="
            DESELECT_NODES([node.id])
            UNSET_NODE_HIGHLIGHT(node.id)
          "
        >
          <Node
            :dataId="node.id"
            :visuals="{ baseNodeRadius: 11, groupNodeRadiusDifference: 2, smallLabel: true }"
            :allowHover="true"
          ></Node>
        </div>
      </section>
      <section v-else>Select nodes with left click.</section>

      <div class="buttons">
        <b-button
          :disabled="selectedNodes.length > 1 ? false : true"
          size="is-small"
          type="is-dark"
          @click="
            prepareGroup()
          "
        >Make group</b-button>

        <b-button
          :disabled="selectedNodes.length > 1 ? false : true"
          size="is-small"
          type="is-dark"
          @click="
            prepareAlias()
          "
        >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"
          size="is-small"
          type="is-dark"
          @click="prepareBundle()"
        >Bundle to …</b-button>
      </div>

      <div v-if="isChoosingAggregationName">
        <b-field grouped>
          <b-input v-model="aggregationLabel" placeholder="Enter a label"></b-input>
          <p class="control">
            <b-button class="button is-primary" @click="commitAggregation">Commit</b-button>
          </p>
        </b-field>
      </div>
    </template>
  </BaseCollapsibleCard>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
import Node from '@/components/Tools/Node/Node.vue'

export default {
  components: { Node },

  data() {
    return {
      isChoosingAggregationName: false,
      chosenAction: undefined,
      aggregationLabel: '',
      isSelectingRepresentativeNode: false,
      previouslySelectedNodes: []
    }
  },

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

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

    prepareBundle() {
      this.isSelectingRepresentativeNode = true
      this.previouslySelectedNodes = []
      this.selectedNodes.forEach(id => this.previouslySelectedNodes.push(id))
    },
    prepareGroup() {
      this.isChoosingAggregationName = true
      this.chosenAction = 'group'
    },
    prepareAlias() {
      this.isChoosingAggregationName = true
      this.chosenAction = 'alias'
    },
    commitAggregation() {
      if (this.chosenAction === 'group') {
        this.groupNodes({ nodes: this.selectedNodes, label: this.aggregationLabel })
        this.clearCloseNodeSelection()
      } else if (this.chosenAction === 'alias') {
        this.aliasNodes({ nodes: this.selectedNodes, label: this.aggregationLabel })
        this.clearCloseNodeSelection()
      } else {
        throw Error('Invalid action')
      }
      this.chosenAction = undefined
      this.isChoosingAggregationName = false
      this.labelInput = ''
    }
  },

  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
section
  font-size: 0.9em
  margin-bottom: 0.7em

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