<template>
  <nav
    data-cy="module-navigation"
    class="module-navigation sub-navigation">
    <back-link
      :title="module.topic.title"
      :slug="module.topic.slug"
      class="module-navigation__topic-link"
      type="topic"/>
    <div
      class="module-navigation__module-content"
      v-if="false"> <!-- Do not display this for now, might be used later again though -->
      <router-link
        :to="moduleContentLink"
        tag="h3"
        class="module-navigation__heading"
      >Inhalte: {{ module.metaTitle }}
      </router-link>
      <div
        class="module-navigation__anchors"
        v-if="onModulePage">
        <a
          v-scroll-to="'#meta-title'"
          href="#"
          class="module-navigation__anchor">Einleitung</a>
        <a
          v-scroll-to="'#objectives'"
          href="#"
          class="module-navigation__anchor">Lernziele</a>

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

    <div
      class="module-navigation__toggle-menu"
      data-cy="module-teacher-menu"
      v-if="canManageContent && !me.readOnly && !me.selectedClass.readOnly"
    >
      <snapshot-menu class="module-navigation__actions"/>
      <router-link
        :to="{name: 'module-settings'}"
        class="module-navigation__actions"
        data-cy="module-settings-button">Einstellungen
      </router-link>
      <toggle-editing v-if="onModulePage"/>
    </div>
  </nav>

</template>

<script>
  import BackLink from '@/components/BackLink';
  import {moduleQuery} from '@/graphql/queries';

  import SubNavigationItem from '@/components/book-navigation/SubNavigationItem';
  import ToggleEditing from '@/components/toggle-menu/ToggleEditing';
  import me from '@/mixins/me';
  import SnapshotMenu from '@/components/modules/SnapshotMenu';

  export default {
    apollo: {
      module: moduleQuery,
    },

    mixins: [me],

    components: {
      SnapshotMenu,
      BackLink,
      SubNavigationItem,
      ToggleEditing,
    },

    data() {
      return {
        module: {
          assignments: [],
          topic: {},
        },
      };
    },

    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() {
        if (!this.module.chapters) {
          return [];
        }
        return this.extractAssignmentsFromChapters(this.module.chapters, []);
      },
    },

    methods: {
      chapterId(index) {
        return `#chapter-${index}`;
      },
      submissionsLink(assignment) {
        return `/module/${this.module.slug}/submissions/${assignment.value.id}`;
      },
      extractAssignmentsFromChapters(chapters, assignments) {
        chapters.forEach(node => {
          if (node.contentBlocks) { // in chapter node
            // if chapter information is required then do it here like so:
            // assignments.push({
            //   chapterTitle: node.title
            // });
            // return this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
            assignments = this.extractAssignmentsFromChapters(node.contentBlocks, assignments);
          } else if (node.contents) {
            let foundAssignments = [];
            node.contents.forEach(contentNode => {
              foundAssignments = this.concatAssignments(foundAssignments, contentNode);
            });
            assignments = [...assignments, ...foundAssignments];
          }
        });
        return assignments;
      },
      concatAssignments(foundAssignments, node) {
        let foundAssignment = this.findAssignment(node);
        return foundAssignment ? [...foundAssignments, ...foundAssignment] : foundAssignments;
      },
      findAssignment(node) {
        if (node.type && node.type === 'assignment') {
          return [node];
        } else if (node.type && node.type === 'content_list_item') {
          let foundAssignments = [];
          node.value.forEach(contentNode => {
            foundAssignments = this.concatAssignments(foundAssignments, contentNode);
          });
          return this.flattenArray(foundAssignments);
        } else {
          return null;
        }
      },
      flattenArray(arrayToFlatten) {
        // https://stackoverflow.com/questions/10865025/merge-flatten-an-array-of-arrays
        return [].concat.apply([], arrayToFlatten);
      },
    },
  };
</script>

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

  @mixin module-navigation-typography {
    font-family: $sans-serif-font-family;
    color: $color-silver-dark;
    font-weight: $font-weight-regular;
  }

  .module-navigation {
    display: none;
    width: 100%;
    box-sizing: border-box;
    z-index: 11;
    background-color: $color-white;
    border-top: 1px solid $color-silver;

    &__topic-link {
      @include regular-text;
    }

    @include desktop {
      display: flex;
    }

    &__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;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;

      &--active {
        color: $color-brand;
      }
    }

    &__toggle-menu {
      margin-left: auto;
      display: flex;
      align-items: center;
    }

    &__actions {
      @include regular-text;
      margin-right: $medium-spacing;
    }
  }
</style>
