<template>
  <div
    class="switch-buttons pointer"
    :data-tooltip="`Passer en mode ${massMode === 'modify' ? 'suppression':'édition'}`"
    @click="switchMode"
  >
    <div><em :class="['icon pencil', {disabled: massMode !== 'modify'}]" /></div>
    <span class="grey">|&nbsp;</span>
    <div><em :class="['icon trash', {disabled: massMode !== 'delete'}]" /></div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  name: 'FeatureListMassToggle',

  computed: {
    ...mapState('feature', ['massMode'])
  },

  methods: {
    ...mapMutations('feature', [
      'TOGGLE_MASS_MODE',
      'UPDATE_CHECKED_FEATURES',
      'UPDATE_CLICKED_FEATURES']),

    switchMode() {
      this.TOGGLE_MASS_MODE(this.massMode === 'modify' ? 'delete' : 'modify');
      this.UPDATE_CLICKED_FEATURES([]);
      this.UPDATE_CHECKED_FEATURES([]);
    }
  },
};
</script>

<style scoped>
.switch-buttons {
  display: flex;
  justify-content: center;
  align-items: baseline;
}

.grey {
  color: #bbbbbb;
}

</style>