<template>
  <div
    :data-scrollto="chapter.id"
    class="chapter">
    <div
      :class="{'hideable-element--greyed-out': titleGreyedOut}"
      class="hideable-element"
      v-if="!titleHidden">
      <h3
        :id="'chapter-' + index"
      >{{ chapter.title }}</h3>
    </div>

    <visibility-action
      :block="chapter"
      type="chapter-title"
      v-if="editModule"
    />

    <bookmark-actions
      :bookmarked="chapter.bookmark"
      :note="note"
      class="chapter__bookmark-actions"
      @add-note="addNote"
      @edit-note="editNote"
      @bookmark="bookmark(!chapter.bookmark)"
    />
    <div
      :class="{'hideable-element--greyed-out': descriptionGreyedOut}"
      class="chapter__intro intro hideable-element"
      v-if="!descriptionHidden"
    >
      <visibility-action
        :block="chapter"
        :chapter="true"
        type="chapter-description"
        v-if="editModule"
      />
      <p
        class="chapter__description">
        {{ chapter.description }}
      </p>
    </div>

    <add-content-button
      :parent="chapter"
      v-if="editModule"/>

    <content-block
      :content-block="contentBlock"
      :parent="chapter.id"
      :key="contentBlock.id"
      v-for="contentBlock in filteredContentBlocks"/>
  </div>
</template>

<script>
import ContentBlock from '@/components/ContentBlock';
import AddContentButton from '@/components/AddContentButton';
import BookmarkActions from '@/components/notes/BookmarkActions';
import VisibilityAction from '@/components/visibility/VisibilityAction';

import {mapState} from 'vuex';
import {hidden} from '@/helpers/visibility';
import {CONTENT_TYPE, CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE} from '@/consts/types';

import UPDATE_CHAPTER_BOOKMARK_MUTATION from '@/graphql/gql/mutations/updateChapterBookmark.gql';
import CHAPTER_QUERY from '@/graphql/gql/chapterQuery.gql';

import me from '@/mixins/me';

export default {
  props: ['chapter', 'index'],

  mixins: [me],

  components: {
    BookmarkActions,
    VisibilityAction,
    ContentBlock,
    AddContentButton
  },

  computed: {
    ...mapState(['editModule']),
    filteredContentBlocks() {
      if (!(this.chapter && this.chapter.contentBlocks)) {
        return [];
      }
      if (this.editModule) {
        return this.chapter.contentBlocks;
      }
      return this.chapter.contentBlocks.filter(contentBlock => !hidden({
        block: contentBlock,
        schoolClass: this.schoolClass,
        type: CONTENT_TYPE
      }));
    },
    note() {
      if (this.chapter && this.chapter.bookmark) {
        return this.chapter.bookmark.note;
      }
    },
    titleGreyedOut() {
      return this.textHidden(CHAPTER_TITLE_TYPE) && this.editModule;
    },
    // never hidden when editing the module
    titleHidden() {
      return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editModule;
    },
    descriptionGreyedOut() {
      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editModule;
    },
    // never hidden when editing the module
    descriptionHidden() {
      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editModule;
    }
  },

  methods: {
    bookmark(bookmarked) {
      const id = this.chapter.id;
      this.$apollo.mutate({
        mutation: UPDATE_CHAPTER_BOOKMARK_MUTATION,
        variables: {
          input: {
            chapter: id,
            bookmarked
          }
        },
        update: (store, response) => {
          const query = CHAPTER_QUERY;
          const variables = {id};
          const data = store.readQuery({
            query,
            variables
          });

          const chapter = data.chapter;

          if (bookmarked) {
            chapter.bookmark = {
              __typename: 'ChapterBookmarkNode',
              note: null
            };
          } else {
            chapter.bookmark = null;
          }

          data.chapter = chapter;

          store.writeQuery({
            data,
            query,
            variables
          });
        },
        optimisticResponse: {
          __typename: 'Mutation',
          updateChapterBookmark: {
            __typename: 'UpdateChapterBookmarkPayload',
            success: true
          }
        }
      });
    },
    addNote(id) {
      this.$store.dispatch('addNote', {
        content: id,
        parent: this.chapter.id
      });
    },
    editNote() {
      this.$store.dispatch('editNote', this.chapter.bookmark.note);
    },
    textHidden(type) {
      return hidden({
        block: this.chapter,
        schoolClass: this.schoolClass,
        type
      });
    }
  },

};
</script>

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

.chapter {
  position: relative;

  &__bookmark-actions {
    margin-top: 3px;
  }

  &__intro {
    position: relative;
  }

  &__description {
    @include lead-paragraph;

    margin-bottom: $large-spacing;
  }
}
</style>
