<template>
  <div class="choice-input">
    <v-list-item
      v-for="creature in creatures"
      :key="creature._id"
      :class="{
        'primary--text v-list-item--active': value.includes(creature._id),
      }"
      dense
      @click="selectCreature(creature._id)"
    >
      <v-list-item-avatar
        :color="value.includes(creature._id) ? 'red darken-1' : creature.color || 'grey'"
        class="white--text"
        style="transition: background 0.3s;"
      >
        <v-fade-transition leave-absolute>
          <v-icon v-if="value.includes(creature._id)">
            mdi-check
          </v-icon>
          <img
            v-else-if="creature.avatarPicture"
            :src="creature.avatarPicture"
            :alt="creature.name"
          >
          <template v-else>
            <span>
              {{ creature.initial }}
            </span>
          </template>
        </v-fade-transition>
      </v-list-item-avatar>
      <v-list-item-content>
        <v-list-item-title>
          {{ creature.name }}
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
    <v-btn
      @click="$emit('continue');"
    >
      Done
    </v-btn>
  </div>
</template>

<script lang="js">
import Creatures from '/imports/api/creature/creatures/Creatures';

export default {
  props: {
    value: {
      type: Array,
      required: true,
    },
    target: {
      type: String,
      default: 'multipleTargets',
    },
    tabletopId: {
      type: String,
      required: true
    },
  },
  methods: {
    selectCreature(id) {
      let newValue;
      if (this.value.includes(id)) {
        newValue = this.value.filter((creatureId) => creatureId !== id);
      } else if (this.target === 'singleTarget') {
        newValue = [id];
      } else {
        newValue = [...this.value, id];
      }
      this.$emit('input', newValue);
    },
  },
  meteor: {
    creatures() {
      return Creatures.find({
        tabletopId: this.tabletopId,
      }, {
        sort: {
          name: 1,
        },
      }).fetch();
    }
  }
};
</script>