<template>
  <div class="content-component"
       :class="{'content-component--bookmarked': bookmarked}"
       :data-scrollto="component.id">
    <bookmark-actions
      v-if="showBookmarkActions"
      @add-note="addNote(component.id)"
      @edit-note="editNote"
      @bookmark="bookmarkContent(component.id, !bookmarked)"
      :bookmarked="bookmarked"
      :note="note"></bookmark-actions>
    <component
      :is="component.type"
      v-bind="component"
      :parent="parent"
    >
    </component>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  import TextBlock from '@/components/content-blocks/TextBlock';
  import InstrumentWidget from '@/components/content-blocks/InstrumentWidget';
  import ImageBlock from '@/components/content-blocks/ImageBlock';
  import ImageUrlBlock from '@/components/content-blocks/ImageUrlBlock';
  import VideoBlock from '@/components/content-blocks/VideoBlock';
  import LinkBlock from '@/components/content-blocks/LinkBlock';
  import DocumentBlock from '@/components/content-blocks/DocumentBlock';
  import InfogramBlock from '@/components/content-blocks/InfogramBlock';
  import ThinglinkBlock from '@/components/content-blocks/ThinglinkBlock';
  import GeniallyBlock from '@/components/content-blocks/GeniallyBlock';
  import SubtitleBlock from '@/components/content-blocks/SubtitleBlock';
  import ContentListBlock from '@/components/content-blocks/ContentListBlock';
  import ModuleRoomSlug from '@/components/content-blocks/ModuleRoomSlug';
  import Assignment from '@/components/content-blocks/assignment/Assignment';
  import Survey from '@/components/content-blocks/SurveyBlock';
  import Solution from '@/components/content-blocks/Solution';
  import BookmarkActions from '@/components/notes/BookmarkActions';

  import {constructContentComponentBookmarkMutation} from '@/helpers/update-content-bookmark-mutation';

  export default {
    props: ['component', 'parent', 'bookmarks', 'notes', 'root'],

    components: {
      'text_block': TextBlock,
      'basic_knowledge': InstrumentWidget, // for legacy
      'instrument': InstrumentWidget,
      'image_block': ImageBlock,
      'image_url_block': ImageUrlBlock,
      'video_block': VideoBlock,
      'link_block': LinkBlock,
      'document_block': DocumentBlock,
      'infogram_block': InfogramBlock,
      'genially_block': GeniallyBlock,
      'subtitle': SubtitleBlock,
      'content_list': ContentListBlock,
      'module_room_slug': ModuleRoomSlug,
      'thinglink_block': ThinglinkBlock,
      Survey,
      Solution,
      Assignment,
      BookmarkActions
    },

    computed: {
      ...mapGetters(['editModule']),
      bookmarked() {
        return this.bookmarks && !!this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
      },
      note() {
        const bookmark = this.bookmarks && this.bookmarks.find(bookmark => bookmark.uuid === this.component.id);
        return bookmark && bookmark.note;
      },
      showBookmarkActions() {
        return this.component.type !== 'content_list' && this.component.type !== 'basic_knowledge' && !this.editModule;
      }
    },

    methods: {
      addNote(id) {
        this.$store.dispatch('addNote', {
          content: id,
          type: this.parent.__typename,
          block: this.root
        });
      },
      editNote() {
        this.$store.dispatch('editNote', this.note);
      },
      bookmarkContent(uuid, bookmarked) {
        this.$apollo.mutate(constructContentComponentBookmarkMutation(uuid, bookmarked, this.parent, this.root));
      }
    }
  };
</script>

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

  .content-component {
    position: relative;
    &--bookmarked {

    }
  }
</style>
