<template>
  <div class="demo-page includes-toc">
    <toc :sections="sections" />
    <section>
      <p v-if="$route.meta.desc">
        {{ $route.meta.desc }}
      </p>
      <RouterView />
    </section>
  </div>
</template>

<script>
  /**
   * Automatically create a table of contents based on the routeName prop and show whatever the route component is.
   *
   * @vuedoc
   * @exports views/examples/layout
   * @category views
   */
  import toc from '@/views/examples/Toc';

  export default {
    name: 'ExampleLayout',
    components: { toc },
    props: {
      routeName: {
        type: String,
        required: true,
      },
    },
    computed: {
      /**
       * Gets the table children routes and maps a toc out of it.
       *
       * @returns {Array}
       */
      sections() {
        const examples = this.$router.options.routes.find(({ name }) => name !== 'root');

        return examples.children
          .find(({ name }) => name === this.routeName)
          .children
          .map(({ meta, name }) => ({
            name,
            title: meta.title,
          }));
      },
    },
  };
</script>
