<template>
  <content-list :items="contentBlocks">
    <template #default="{ item }">
      <content-block
        :content-block="item"
        :parent="parent"
      />
    </template>
  </content-list>
</template>

<script>
import { defineAsyncComponent } from 'vue';
const ContentList = defineAsyncComponent(() => import('@/components/content-blocks/ContentList.vue'));
const ContentBlock = defineAsyncComponent(() => import('@/components/ContentBlock.vue'));

export default {
  name: 'ContentBlockList',
  props: ['contents', 'parent'],

  components: {
    ContentList,
    ContentBlock,
  },

  computed: {
    contentBlocks() {
      return this.contents.map((contentBlock) => {
        const contents = contentBlock.value ? [...contentBlock.value] : [];
        return Object.assign({}, contentBlock, {
          contents,
          indent: true,
          bookmarks: this.parent.bookmarks,
          notes: this.parent.notes,
          root: this.parent.id,
        });
      });
    },
  },
};
</script>
