<template>
  <b-collapse v-if="isShownTagCreation" class="card card-right">
    <div slot="trigger" slot-scope="props" class="card-header" role="button">
      <p class="card-header-title">Group tag creation</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>Group tag creation</span>
    </div>

    <div class="card-content">
      <div class="content">
        <div class="form__field">
          <div class="label-buefy-style">
            <!-- class="form__label" -->
            <span>Choose a group tag color:</span>
          </div>
          <div class="form__input">
            <swatches
              v-model="color"
              :colors="colors"
              shapes="circles"
              popover-to="left"
              @input="dispatchSetTagColor()"
            ></swatches>
          </div>
        </div>

        <b-field>
          <b-field label="Choose a group tag name">
            <b-input
              v-model="name"
              placeholder="Group tag name"
              @change="name = value"
              @input="dispatchSetTagName()"
            ></b-input>
          </b-field>
        </b-field>

        <div class="buttons">
          <b-button class="button is-primary" @click="dispatchTagNodes(selectedNodes)"
            >Tag nodes</b-button
          >
        </div>
      </div>
    </div>
  </b-collapse>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
import Swatches from 'vue-swatches'
import 'vue-swatches/dist/vue-swatches.min.css'

export default {
  components: {
    Swatches
  },
  data() {
    return {
      color: '',
      colors: [
        '',
        '#e6194B',
        '#3cb44b',
        '#ffe119',
        '#4363d8',
        '#f58231',
        '#911eb4',
        '#42d4f4',
        '#f032e6',
        '#bfef45',
        '#fabebe',
        '#469990',
        '#e6beff',
        '#9A6324',
        '#fffac8',
        '#800000',
        '#aaffc3',
        '#808000',
        '#ffd8b1',
        '#000075',
        '#a9a9a9',
        '#000000'
      ],
      name: ''
    }
  },

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

  watch: {
    isShownTagCreation: function(isShownTagCreation) {
      console.log(isShownTagCreation)
      if (!isShownTagCreation) {
        this.color = ''
        this.name = ''
        this.dispatchSetTagColor()
        this.dispatchSetTagName()
      }
    }
  },

  methods: {
    ...mapActions('data', ['tagNodes', 'setTagColor', 'setTagName']),

    dispatchTagNodes(selectedNodes) {
      this.$store.dispatch('data/tagNodes', {
        nodesToTagIds: selectedNodes,
        color: this.color,
        name: this.name
      })
      this.color = ''
      this.name = ''
    },
    dispatchSetTagColor() {
      this.$store.dispatch('data/setTagColor', this.color)
    },
    dispatchSetTagName() {
      this.$store.dispatch('data/setTagName', this.name)
    }
  }
}
</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>
