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

<script setup lang="ts">
import ContentList from '@/components/content-blocks/ContentList.vue';
import ContentBlock from '@/components/ContentBlock.vue';
import { computed } from '@vue/reactivity';

export interface Props {
  // todo: use useful types here
  contents: any[];
  parent: any;
}

const props = defineProps<Props>();

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

<script lang="ts">
export default {
  // can't really declare names with the new script setup syntax, that's why this is still here
  // todo: does this name still matter anywhere?
  name: 'ContentBlockList',
};
</script>
