<template>
  <div class="filter-group">
    <filter-entry
      v-bind="$attrs"
      :text="title"
      :type="category"
      :category="category"
      :is-category="true"
      :id="category.id"
      @filter="setCategoryFilter(category.id)"
    />
    <div class="filter-group__children" v-if="$flavor.showInstrumentSubCategories">
      <filter-entry
        :data-cy="`filter-${type.type}`"
        :category="type.category"
        :text="type.name"
        v-for="type in types"
        :id="type.id"
        :key="type.id"
        @filter="setFilter(`type:${type.id}`)"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import FilterEntry from '@/components/instruments/FilterEntry.vue';
import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';

export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
    types: {
      type: Array,
      default: () => [],
    },
    category: {
      type: Object,
      default: () => ({}),
    },
  },
  components: {
    FilterEntry,
  },
  inheritAttrs: false,

  methods: {
    setCategoryFilter(category) {
      if (category) {
        this.setFilter(`category:${category}`);
      } else {
        this.setFilter(``);
      }
    },
    setFilter(filter) {
      this.$apollo.mutate({
        mutation: SET_FILTER_MUTATION,
        variables: {
          filter,
        },
      });
    },
  },
});
</script>

<style scoped lang="scss">
@import 'styles/helpers';

.filter-group {
  border-bottom: 1px solid $color-silver;
  padding: $medium-spacing 0;
  display: flex;
  flex-direction: column;

  &__children {
    padding-left: $medium-spacing;
  }
}
</style>
