<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
      v-bind="component"
      :parent="parent"
      :is="component.type"
    />
  </div>
</template>

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

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

const TextBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/TextBlock');
const InstrumentWidget = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InstrumentWidget');
const ImageBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageBlock');
const ImageUrlBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ImageUrlBlock');
const VideoBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/VideoBlock');
const LinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock');
const DocumentBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/DocumentBlock');
const InfogramBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/InfogramBlock');
const ThinglinkBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ThinglinkBlock');
const GeniallyBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/GeniallyBlock');
const SubtitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SubtitleBlock');
const SectionTitleBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SectionTitleBlock');
const ContentListBlock = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ContentListBlock');
const ModuleRoomSlug = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/ModuleRoomSlug');
const Assignment = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/assignment/Assignment');
const Survey = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/SurveyBlock');
const Solution = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Solution');
const Instruction = () => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/Instruction');
const BookmarkActions = () => import(/* webpackChunkName: "content-components" */'@/components/notes/BookmarkActions');

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) {
      if (!this.parent.hasOwnProperty('__typename')) {
        this.parent.__typename = 'ContentBlockNode';
      }

      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>
