<template>
  <span>
    <span v-if="hasFilterItems && !gratisMode">
      <small
        v-for="({ filter_item }, i) in filterItemResolved"
        :key="`column-filter_item-${filter_item.id}`"
      >
        <v-icon
          :color="filter_item.color"
          class="mx-1"
          size="10"
          v-if="filter_item.color"
          >mdi-circle</v-icon
        >
        <span v-if="filter_item.title">{{ filter_item.title }}</span>
        <span v-if="filter_item.subtitle">{{ filter_item.subtitle }}</span>
        {{ filterItemResolved.length - 1 === i ? '' : '-' }}
      </small>
    </span>

    <span v-if="gratisMode && isGratis">
      <v-icon class="mx-1" color="accent" x-small>mdi-star</v-icon>
      <span class="accent--text">Gratis</span>
    </span>
  </span>
</template>

<script>
export default {
  props: {
    filterTitle: {
      type: String,
      default: 'type',
    },
    filters: {
      type: Array,
      default: [],
    },
    gratisMode: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    filterItemResolved() {
      // return this.$store.getters.filterItemsResolved(
      //   this.filterTitle,
      //   this.filters
      // )

      const filter = this.$store.getters.getFilterByTitle(this.filterTitle)
      return this.filters.filter((f) => f.filter_item.filter_id === filter.id)
    },
    hasFilterItems() {
      return this.filterItemResolved.length > 0
    },
    isGratis() {
      return this.filterItemResolved.find(
        (f) => f.filter_item.title === 'Gratis'
      )
    },
  },
}
</script>

<style scoped>
small span {
  font-size: 15.75px;
}
.mdi-star {
  margin-right: 0 !important;
}
</style>
