<template>
  <div>
    <div v-if="edit_mode" class="tag">
      <div class="icon">
        <font-awesome-icon :icon="edited_tag.icon" class="fa-2x"/>
          <!--
        Icône inconnue
          -->

      </div>
      <div class="description">
        <b-form-input type="text" v-model="edited_tag.name"></b-form-input>
        <b-form-input type="text" v-model="edited_tag.icon"></b-form-input>
        <b-form-input type="color" v-model="edited_tag.color"></b-form-input>
      </div>
      <div class="actions">
        <b-button-group vertical v-if="editable">
          <b-button @click="save()" >Sauver</b-button>
          <b-button @click="toggleEdit()">Annuler</b-button>
        </b-button-group>
      </div>
    </div>
    <div v-else class="tag">
      <div class="icon">
        <font-awesome-icon :style="{ color: tag.color}" :icon="tag.icon" class="fa-2x"/>
      </div>
      <div class="description">
        <h4>{{ tag.name }}</h4>

        Mots clés: {{ tag.words.join(" - ") }}
      </div>
      <div class="actions">
      <!--
        <b-button-group vertical v-if="editable">
          <b-button @click="toggleEdit()">Editer</b-button>
          <b-button>Supprimer</b-button>
        </b-button-group>
      -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'tagConfig',
  props: [
    'tagname'
  ],
  data () {
    return {
      default_tag: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      },
      edit_mode: false,
      edited_tag: {}
    }
  },
  computed: {
    ...mapGetters('config', {
      getTag: 'tag'
    }),
    tag () {
      if (this.tagname) {
        return this.getTag(this.tagname)
      } else {
        return this.default_tag
      }
    },
    editable () {
      if (this.tagname) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapActions('config', [
      'edit_tag'
    ]),
    toggleEdit () {
      this.edited_tag = { ...this.tag }
      this.edit_mode = !this.edit_mode
    },
    save () {
      this.edit_tag(this.edited_tag)
      this.toggleEdit()
    }
  }
}

</script>

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