<template>
  <v-select
    v-model="synonymsSelected"
    :items="allSynonyms"
    attach
    chips
    multiple
    item-text="title"
    item-value="id"
    :outlined="editMode"
    :solo="!editMode"
    :disabled="!editMode"
    :flat="!editMode"
    append-icon="icon-dropdown"
  >
    <template v-slot:selection="{ attrs, item, select, selected }">
      <v-chip
        v-bind="attrs"
        :input-value="selected"
        color="secondary"
        @click="select"
      >
        <!-- close -->
        <!-- @click:close="remove(item)" -->
        <v-icon class="mx-2"> mdi-tag</v-icon>

        <strong>{{ item.title }}</strong
        >&nbsp;
      </v-chip>
    </template>
  </v-select>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    synonymsSelected: {
      get() {
        return this.$store.state.learning.synonymsSelected
      },
      set(value) {
        this.$store.commit('learning/SELECT_SYNONYM', value)
      },
    },

    allSynonyms() {
      return this.$store.getters.synonyms
    },
  },

  // methods: {
  //   remove(synonym) {
  //     if (!synonym || !synonym.id) return
  //     this.$store.dispatch('learning/removeSynonym', synonym.id)
  //   },
  // },
}
</script>