<template>
  <div :data-scrollto="chapter.id" class="chapter" data-cy="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="editMode" />

    <bookmark-actions
      :bookmarked="!!chapter.bookmark"
      :note="note"
      :edit-mode="editMode"
      class="chapter__bookmark-actions"
      data-cy="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="editMode" />
      <p class="chapter__description">
        {{ chapter.description }}
      </p>
    </div>

    <add-content-button :where="{ parent: chapter }" v-if="editMode" />

    <content-block
      :content-block="contentBlock"
      :parent="chapter"
      :edit-mode="editMode"
      v-for="contentBlock in filteredContentBlocks"
      :key="contentBlock.id"
    />
  </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 { hidden } from '@/helpers/visibility';
import { CHAPTER_DESCRIPTION_TYPE, CHAPTER_TITLE_TYPE, CONTENT_TYPE } from '@/consts/types';

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

import me from '@/mixins/me';

export default {
  props: {
    chapter: {
      type: Object,
      default: () => ({}),
    },
    index: {
      type: Number,
      default: 0,
    },
    editMode: {
      type: Boolean,
      default: false,
    },
  },

  mixins: [me],

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

  computed: {
    filteredContentBlocks() {
      if (!(this.chapter && this.chapter.contentBlocks)) {
        return [];
      }
      if (this.editMode) {
        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;
      }
      return false;
    },
    titleGreyedOut() {
      return this.textHidden(CHAPTER_TITLE_TYPE) && this.editMode;
    },
    // never hidden when editing the module
    titleHidden() {
      if (this.chapter.titleHidden === true) {
        return true;
      }
      return this.textHidden(CHAPTER_TITLE_TYPE) && !this.editMode;
    },
    descriptionGreyedOut() {
      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && this.editMode;
    },
    // never hidden when editing the module
    descriptionHidden() {
      if (this.chapter.descriptionHidden === true) {
        return true;
      }
      return this.textHidden(CHAPTER_DESCRIPTION_TYPE) && !this.editMode;
    },
  },

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

          let bookmark;

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

          const data = {
            chapter: {
              ...chapter,
              bookmark,
            },
          };

          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/helpers';

.chapter {
  position: relative;

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

  &__intro {
    position: relative;
  }

  &__description {
    @include lead-paragraph;

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