<template>
  <div :class="componentClass" :data-scrollto="component.id" data-cy="content-component">
    <bookmark-actions
      :bookmarked="bookmarked"
      :note="note"
      :edit-mode="editMode"
      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 { 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 CmsDocumentBlock = () =>
  import(/* webpackChunkName: "content-components" */ '@/components/content-blocks/CmsDocumentBlock');
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: {
      type: Object,
      default: () => ({}),
    },
    parent: {
      type: Object,
      default: () => ({}),
    },
    bookmarks: {
      type: Array,
      default: () => [],
    },
    notes: {
      type: Array,
      default: () => [],
    },
    root: {
      type: String,
      default: '',
    },
    editMode: {
      type: Boolean,
      default: false,
    },
  },

  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,
    cms_document_block: CmsDocumentBlock,
    Survey,
    Solution,
    Instruction,
    Assignment,
    BookmarkActions,
  },

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

  methods: {
    addNote(id) {
      const type = Object.prototype.hasOwnProperty.call(this.parent, '__typename')
        ? this.parent.__typename
        : 'ContentBlockNode';

      this.$store.dispatch('addNote', {
        content: id,
        type,
        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/helpers';

.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;
  }

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