<template>
  <div class="tag">
    <div class="icon">
      <font-awesome-icon :style="{ color: value.color}" :icon="value.icon" class="fa-2x"/>
    </div>
    <div class="description">
        <div v-if="existing_tag">
          <h4>{{ value.name }}</h4>
        </div>
        <div v-else>
          <b-form-input type="text" v-model="value.name"></b-form-input>
        </div>
          <b-form-group horizontal
                        label="Icône:"
                        label-class="text-sm"
                        label-for="icon">
            <b-form-input type="text" v-model="value.icon" id="icon"></b-form-input>
          </b-form-group>
          <b-form-group horizontal
                        label="Couleur:"
                        label-class="text-sm"
                        label-for="color">
            <b-form-input type="color" v-model="value.color" id="color"></b-form-input>
          </b-form-group>
          <b-form-group horizontal
                        label="Mots clés:"
                        label-class="text-sm"
                        label-for="keywords"
                        description="Une expression clé par ligne">
            <b-form-textarea v-model="keywords" id="keywords"></b-form-textarea>
          </b-form-group>
    </div>
  </div>

  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'editTag',
  props: {
    value: {
      type: Object,
      default: function () {
        return {
          color: '',
          icon: 'question',
          name: '',
          variant: '',
          words: []
        }
      }
    }
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters({
      'tag': 'config/tag',
    }),
    keywords: {
      get: function () {
        return this.value.words.join('\n')
      },
      set: function (keywords) {
        var kwds = keywords.split('\n')
        this.value.words = kwds
      }
    },
    existing_tag () {
      return this.tag(this.value.name) ? true : false
    }
  },
  methods: {
  }
}

</script>

<style scoped>
.tag {
  text-align: left;
  align-self: center;
  display: flex;
}
.icon {
  flex: 10%;
  align-self: center;
}
.description {
  flex: 90%;
  text-align: left;
  align-self: center;
}
</style>
