<template>
  <div class="instrument-overview">
    <div class="instrument-overview__heading">
      <h1 class="instrument-overview__title">
        Instrumente
      </h1>
    </div>
    <instrument-filter
      class="instrument-overview__filter"
      @filter="updateFilter"/>
    <div class="instrument-overview__list">
      <router-link
        :to="{name: 'instrument', params: {slug: instrument.slug}}"
        :key="instrument.id"
        class="instrument-overview__list-item"
        tag="div"
        v-for="instrument in filteredInstruments">
        {{ instrument.title }}
      </router-link>
    </div>
  </div>
</template>

<script>
  import InstrumentFilter from '@/components/instruments/InstrumentFilter';
  import INSTRUMENTS_QUERY from '@/graphql/gql/queries/instrumentsQuery.gql';

  export default {
    components: {
      InstrumentFilter
    },

    apollo: {
      instruments: {
        query: INSTRUMENTS_QUERY,
        update(data) {
          return this.$getRidOfEdges(data).instruments;
        }
      }
    },

    data() {
      return {
        instruments: [],
        filter: []
      };
    },

    computed: {
      filteredInstruments() {
        return this.instruments.filter(instrument => this.filter.includes(instrument.type) || !this.filter.length);
      }
    },

    methods: {
      updateFilter(filter) {
        this.filter = filter;
      }
    },
  };
</script>

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

  .instrument-overview {
    display: grid;
    grid-template-rows: auto auto 1fr;
    @include centered(800px);

    &__heading {
      padding: 2*$large-spacing 0;
      width: 100%;
      display: flex;
      justify-content: flex-start;
    }

    &__title {
      max-width: $screen-width;
      line-height: 1.2;
      margin-bottom: 0;
    }

    &__filter {
      justify-self: start;
    }

    &__list {
      padding: $large-spacing 0;
      max-width: $screen-width;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    &__list-item {
      padding: $medium-spacing 0;

      @include regular-text;
      @include table-row($color-silver);
    }
  }
</style>
