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

    <div slot="header" class="clearfix">
      <span>Tag list</span>
    </div>

    <div class="card-content">
      <div class="content">
        <div
          v-for="t in tags"
          :key="t.id"
          @mouseover="highlightTag(t.name)"
          @mouseout="CLEAR_NODE_HIGHLIGHT()"
        >
          <div class="field">
            <b-checkbox>{{ t.name }}</b-checkbox>
          </div>
        </div>
        <!-- <span>{{ t.name }}</span> @mouseover="highlightTag(t.name)"
        @mouseout="CLEAR_NODE_HIGHLIGHT()"-->
      </div>
    </div>
  </b-collapse>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

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

  computed: {
    ...mapGetters('interaction', ['isShownTagCreation']),
    tags: {
      get() {
        return this.$store.getters['data/getTags']
      },
      set(tags) {
        return tags
      }
    }
  },

  methods: {
    ...mapMutations('interaction', [
      'SET_NODE_HIGHLIGHT',
      'CLEAR_NODE_HIGHLIGHT',
      'SET_LINK_HIGHLIGHT',
      'CLEAR_LINK_HIGHLIGHT',
      'SET_NODE_HOVER',
      'UNSET_NODE_HOVER'
    ]),
    highlightTag(name) {
      let tag = this.tags.find(t => t.name === name)
      tag.nodesWithTag.forEach(n => {
        this.SET_NODE_HIGHLIGHT(n.id)
      })
      if (tag.groupNode) this.SET_NODE_HIGHLIGHT(tag.groupNode.id)
    }
  }
}
</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

.label-buefy-style
  color: #363636;
  display: block;
  font-size: 1rem;
  font-weight: 600;
</style>
