<template>
  <div
    class="content-bookmark module-activity-entry"
    v-if="content"
  >
    <!-- 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('@/components/content-blocks/LinkBlock.vue'));

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>
