<template>
  <div>
    <div v-if="edit_mode" class="categorie">
      <div class="icon">
        <font-awesome-icon :icon="edited_categorie.icon" class="fa-2x"/>
          <!--
        Icône inconnue
          -->
      </div>
      <div class="description">
        <b-form-input type="text" v-model="edited_categorie.name"></b-form-input>
        <b-form-input type="text" v-model="edited_categorie.icon"></b-form-input>
        <b-form-input type="color" v-model="edited_categorie.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="categorie">
      <div class="icon text-info">
        <font-awesome-icon :icon="categorie.icon" class="fa-2x"/>
      </div>
      <div class="description">
        <h4>{{ categorie.name }}</h4>

        Mots clés<span v-if="categorie.invert"> (tout sauf)</span>: {{ categorie.words.length != 0 ? categorie.words.join(" - ") : 'Aucun' }}
      </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: 'categorieItem',
  props: [
    'categoriename'
  ],
  data () {
    return {
      default_categorie: {
        name: 'Tout',
        variant: 'info',
        icon: 'file-invoice-dollar'
      },
      edit_mode: false,
      edited_categorie: {}
    }
  },
  computed: {
    ...mapGetters('config', {
      getcategorie: 'categorie'
    }),
    categorie () {
      if (this.categoriename) {
        return this.getcategorie(this.categoriename)
      } else {
        return this.default_categorie
      }
    },
    editable () {
      if (this.categoriename) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapActions('config', [
      'edit_categorie'
    ]),
    toggleEdit () {
      this.edited_categorie = { ...this.categorie }
      this.edit_mode = !this.edit_mode
    },
    save () {
      this.edit_categorie(this.edited_categorie)
      this.toggleEdit()
    }
  }
}

</script>

<style scoped>
.categorie {
  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>
