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

<script>
import {mapState} 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 SectionTitleBlock from '@/components/content-blocks/SectionTitleBlock';
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 Instruction from '@/components/content-blocks/Instruction';
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,
    'section_title': SectionTitleBlock,
    'content_list': ContentListBlock,
    'module_room_slug': ModuleRoomSlug,
    'thinglink_block': ThinglinkBlock,
    Survey,
    Solution,
    Instruction,
    Assignment,
    BookmarkActions
  },

  computed: {
    ...mapState(['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;
    },
    componentClass() {
      let classes = ['content-component', `content-component--${this.component.type}`];
      if (this.bookmarked) {
        classes.push('content-component--bookmarked');
      }
      return classes;
    }
  },

  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 {

  }

  &--subtitle {
    margin-top: $section-spacing;
    margin-bottom: $large-spacing;
  }

  &--section_title {
    margin-top: $section-spacing;
    margin-bottom: $large-spacing;
  }

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