<template>
  <div class="content-bookmark module-activity-entry">
    <!-- eslint-disable vue/no-v-html -->
    <div
      v-if="content.type === 'text_block'"
      v-html="text"
    />
    <div v-else-if="content.type === 'link_block'">
      <link-block
        :value="content.value"
        :no-margin="true"
      />
    </div>
    <p v-else>
      {{ type }}
    </p>
  </div>
</template>

<script>
  import {defineAsyncComponent} from 'vue';
  const LinkBlock = defineAsyncComponent(() => import(/* webpackChunkName: "content-components" */'@/components/content-blocks/LinkBlock'));

  export default {
    props: ['bookmark'],
    components: {LinkBlock},
    computed: {
      content() {
        return this.bookmark.contentBlock
          ? this.bookmark.contentBlock.contents.find(e => e.id === this.bookmark.uuid)
          : this.bookmark.instrument.contents.find(e => e.id === this.bookmark.uuid);
      },
      text() {
        return this.content.value.text ? this.content.value.text : 'TO BE DEFINED';
      },
      type() {
        switch (this.content.type) {
          case 'assignment':
            return 'Aufgabe & Ergebnis';
          case 'link_block':
            return this.content;
          case 'survey':
            return 'Übung';
          case 'image_url_block':
            return 'Bild';
          default:
            return this.content.type;
        }
      }
    }
  };
</script>
