<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
        title="Lesezeichen"
        class="instrument-activity__entry"
        v-for="bookmark in bookmarks"
        :key="bookmark.id"
        @link="goTo(bookmark.uuid)"
      >
        <content-bookmark :bookmark="bookmark" />
      </activity-entry>
      <activity-entry
        title="Notiz"
        class="instrument-activity__entry"
        v-for="noteBookmark in notes"
        :key="noteBookmark.id"
        @link="goTo(noteBookmark.note.id)"
      >
        {{ noteBookmark.note.text }}
      </activity-entry>
    </div>
  </div>
</template>

<script>
import ContentBookmark from '@/components/profile/ContentBookmark.vue';
import ActivityEntry from '@/components/profile/ActivityEntry.vue';

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.bookmarks.length || this.notes.length);
    },
    notes() {
      return this.applyFilter('notes') ? this.instrument.bookmarks.filter((b) => b.note) : [];
    },
    bookmarks() {
      return this.applyFilter('bookmarks') ? this.instrument.bookmarks : [];
    },
    type() {
      return instrumentType(this.instrument);
    },
  },
  methods: {
    goTo(scrollTo) {
      // TODO: fix this part, with instruments it does not navigate to the bookmark itself. (added in support case 6.9.2023)
      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>
