<template>
  <div
    class="module-activity"
    v-if="!empty">
    <h3 class="module-activity__module-name">{{ module.topic.title }}</h3>
    <h2 class="module-activity__title">{{ module.metaTitle }} - {{ module.title }}</h2>
    <div class="module-activity__tasks activity-tasks">
      <activity-entry
        :key="submission.id"
        title="Aufgabe & Ergebnis"
        class="module-activity__entry"
        v-for="submission in submissions"
        @link="goTo(submission.assignment.id)">
        {{ submission.text }}
      </activity-entry>
      <activity-entry
        :key="answer.id"
        title="Übung"
        class="module-activity__entry"
        v-for="answer in answers"
        @link="goTo(answer.survey.id)">
        {{ answer.survey.title }}
      </activity-entry>
      <activity-entry
        :key="bookmark.id"
        title="Lesezeichen"
        class="module-activity__entry"
        v-for="bookmark in contentBookmarks"
        @link="goTo(bookmark.uuid)">
        <content-bookmark :bookmark="bookmark"/>
      </activity-entry>
      <activity-entry
        :key="bookmark.id"
        title="Lesezeichen"
        class="module-activity__entry"
        v-for="bookmark in chapterBookmarks"
        @link="goTo(bookmark.chapter.id)">
        {{ bookmark.chapter.description }}
      </activity-entry>
      <activity-entry
        :key="note.id"
        title="Notiz"

        class="module-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';

  export default {
    props: ['module', 'filter'],
    components: {
      ContentBookmark,
      ActivityEntry
    },
    computed: {
      empty() {
        return !(this.module.mySubmissions.length ||
          this.module.myAnswers.length ||
          this.module.myContentBookmarks.length ||
          this.module.myChapterBookmarks.length ||
          this.module.bookmark);
      },
      notes() {
        return this.applyFilter('notes') ? this.module.myChapterBookmarks
          .concat(this.module.myContentBookmarks)
          .concat([this.module.bookmark ? this.module.bookmark : {}])
          .filter(b => b.note)
          .map(b => b.note) : [];
      },
      submissions() {
        return this.applyFilter('assignments') ? this.module.mySubmissions : [];
      },
      answers() {
        return this.applyFilter('surveys') ? this.module.myAnswers : [];
      },
      contentBookmarks() {
        return this.applyFilter('bookmarks') ? this.module.myContentBookmarks : [];
      },
      chapterBookmarks() {
        return this.applyFilter('bookmarks') ? this.module.myChapterBookmarks : [];
      }
    },
    methods: {
      ...mapActions(['scrollToAssignmentId']),
      goTo(scrollTo) {
        const url = `/module/${this.module.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";

  .module-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>
