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

<script>
import ContentList from '@/components/content-blocks/ContentList.vue';
export default {
  name: 'ContentBlockList',
  props: ['contents', 'parent'],

  components: {
    ContentList,
    // https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
    ContentBlock: () => import('@/components/ContentBlock.vue'),
  },

  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>

<style scoped lang="scss">
@import '~styles/helpers';
</style>
