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

<script>

  import ContentList from '@/components/content-blocks/ContentList';
  export default {
    name: 'ContentBlockList',
    props: ['contents', 'parent', 'startingIndex'],

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

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

  };
</script>

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

</style>
