<template>
  <div>
    <nav class="module-navigation">
      <div class="module-navigation__module-content">
        <router-link
          tag="h3"
          :to="moduleContentLink"
          class="module-navigation__heading"
        >Inhalte: {{module.metaTitle}}
        </router-link>
        <div class="module-navigation__anchors" v-if="onModulePage">
          <a href="#" v-scroll-to="'#meta-title'" class="module-navigation__anchor">Einleitung</a>
          <a href="#" v-scroll-to="'#objectives'" class="module-navigation__anchor">Lernziele</a>

          <a href="#" class="module-navigation__anchor"
             v-scroll-to="chapterId(index)"
             v-for="(chapter, index) in module.chapters"
             :key="chapter.id">{{chapter.title}}</a>
          <a href="#" v-scroll-to="'#objectives-confirm'" class="module-navigation__anchor">Lernzielkontrolle</a>
        </div>
      </div>

      <div class="module-navigation__module-submissions" v-if="showResults">
        <router-link tag="h3" to="/module/submissions" class="module-navigation__heading">Ergebnisse:
          {{module.metaTitle}}
        </router-link>
        <div class="module-navigation__anchors">
          <router-link
            :to="submissionsLink(assignment)"
            v-for="assignment in assignments"
            :key="assignment.id"
            class="module-navigation__anchor"
            exact-active-class="module-navigation__anchor--active"
          >{{assignmentTitle(assignment)}}
          </router-link>
        </div>
      </div>
    </nav>
  </div>

</template>

<script>
  import {moduleQuery} from '@/graphql/queries';
  import ME_QUERY from '@/graphql/gql/meQuery.gql';
  // import ASSIGNMENTS_QUERY from '@/graphql/gql/assignmentsQuery.gql';

  export default {
    apollo: {
      module: moduleQuery,
      me: {
        query: ME_QUERY
      }
    },

    computed: {
      onModulePage() {
        return this.$route.name === 'module';
      },
      moduleContentLink() {
        return `/module/${this.module.slug}`;
      },
      showResults() {
        return this.me.permissions.includes('users.can_manage_school_class_content');
      },
      assignments() {
        return [...this.module.assignments].sort((a, b) => {
          return a.title.toLowerCase() > b.title.toLowerCase() ? 1 : -1;
        })
      }
    },

    data() {
      return {
        module: {
          assignments: []
        },
        me: {
          permissions: []
        }
      }
    },

    methods: {
      chapterId(index) {
        return `#chapter-${index}`
      },
      submissionsLink(assignment) {
        return `/module/${this.module.slug}/submissions/${assignment.id}`;
      },
      assignmentTitle(assignment) {
        return assignment.title.length > 25 ? assignment.title.substring(0, 22) + '...' : assignment.title;
      }
    }
  }
</script>

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

  @mixin module-navigation-typography {
    font-family: $sans-serif-font-family;
    color: $color-grey;
    font-weight: 400;
  }

  .module-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 75px;
    display: none;

    @include desktop {
      display: block;
    }

    &__module-content {
      margin-bottom: 18px;
    }

    &__heading {
      @include module-navigation-typography;
      margin: 0;
      font-size: 1.0625rem;
      cursor: pointer;
    }
    &__anchors {
      display: flex;
      flex-direction: column;
      padding: 16px 24px 0;
    }
    &__anchor {
      @include module-navigation-typography;
      font-size: 0.875rem;
      line-height: 1.2rem;
      margin-bottom: .6875rem;

      &--active {
        color: $color-brand;
      }
    }
  }
</style>
