<template>
  <div
    class="instrument-activity"
    v-if="!empty">
    <h3 class="instrument-activity__module-name">{{ type }}</h3>
    <h2 class="instrument-activity__title">{{ instrument.title }}</h2>
    <div class="instrument-activity__tasks activity-tasks">
      <activity-entry
        :key="bookmark.id"
        title="Lesezeichen"
        class="instrument-activity__entry"
        v-for="bookmark in bookmarks"
        @link="goTo(bookmark.uuid)">
        <content-bookmark :bookmark="bookmark"/>
      </activity-entry>
      <activity-entry
        :key="note.id"
        title="Notiz"
        class="instrument-activity__entry"
        v-for="note in notes"
        @link="goTo(note.id)">
        {{ note.text }}
      </activity-entry>
    </div>
  </div>
</template>

<script>

  import {mapActions} from 'vuex';
  import ContentBookmark from '@/components/profile/ContentBookmark';
  import ActivityEntry from '@/components/profile/ActivityEntry';

  import SCROLL_TO_MUTATION from '@/graphql/gql/local/mutations/scrollTo.gql';
  import instrumentType from '@/helpers/instrumentType';

  export default {
    props: ['instrument', 'filter'],
    components: {
      ContentBookmark,
      ActivityEntry
    },
    computed: {
      empty() {
        return !this.instrument.bookmarks.length;
      },
      notes() {
        return this.applyFilter('notes') ? this.instrument.bookmarks
          .filter(b => b.note)
          .map(b => b.note) : [];
      },
      bookmarks() {
        return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
      },
      type() {
        return instrumentType(this.instrument);
      }
    },
    methods: {
      ...mapActions(['scrollToAssignmentId']),
      goTo(scrollTo) {
        const url = `/instrument/${this.instrument.slug}/`;
        this.$apollo.mutate({
          mutation: SCROLL_TO_MUTATION,
          variables: {
            scrollTo
          }
        });
        this.$router.push(url);
      },
      applyFilter(filterCriteria) {
        return !this.filter || this.filter === filterCriteria;
      }
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .instrument-activity {
    max-width: 640px;

    @include desktop {
      max-width: 1020px;
    }

    @media (max-width: 639px) {
      max-width: 400px;
    }

    @media (max-width: 401px) {
      max-width: 320px;
    }

    margin-bottom: 2*$large-spacing;

    &__module-name {
      @include regular-text;
      margin-bottom: $small-spacing;
    }

    &__title {
      @include heading-2;
    }

    &__entry {
      &:first-of-type {

        border-top: 1px solid $color-silver;
      }
    }
  }

</style>
