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

<script>
import FilterEntry from '@/components/instruments/FilterEntry';

import SET_FILTER_MUTATION from 'gql/local/mutations/setInstrumentFilter.gql';
import INSTRUMENT_FILTER_QUERY from 'gql/local/instrumentFilter.gql';

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

  apollo: {
    instrumentFilter: {
      query: INSTRUMENT_FILTER_QUERY,
    },
  },

  data() {
    return {
      instrumentFilter: {
        currentFilter: '',
      },
    };
  },
  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>
