<template>
  <div class="content-list-block__container">
    <div class="content-list-wrapper">
      <ol class="content-list">
        <li
          :key="contentBlock.id"
          class="content-list__item contentlist-item"
          v-for="(contentBlock, index) in contentBlocks">
          <p class="content-list__numbering">{{ alphaIndex(index) }})</p>
          <content-block
            :content-block="contentBlock"
            :parent="parent"
          />
        </li>
      </ol>
    </div>
  </div>

</template>

<script>

  const lowerAsciiA = 97;

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

    components: {
      // 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
          });
        });
      }
    },

    methods: {
      alphaIndex(index) {
        return String.fromCharCode(lowerAsciiA + this.startingIndex + index);
      }
    },
};
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .content-list-wrapper {
    .content-list {
      /* https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses */

      &__item {
        list-style: none;
        position: relative;
        padding: 0 0 0 2*15px;
      }

      &__numbering {
          position: absolute;
          font-weight: 600;
          left: 0;
          color: $color-brand;
          line-height: 27px;
      }
    }
  }

</style>
