<template>
  <div>
    <header><h1>Documentatie</h1></header>
    <section>
      <header><h2>Index</h2></header>
      <ul>
        <li v-for="(componentGroup, name) in components" :key="name"><a :href="'#' + createAnchorName(name)">{{name}}</a></li>
        <li><a href="#modules">Modules</a></li>
      </ul>
    </section>
    <section v-for="(componentGroup, name) in components" :key="name" :id="createAnchorName(name)">
      <header>
        <h2>{{name}}</h2>
      </header>
      <div v-for="(component, path) in componentGroup" :key="path">
        <component-doc :path="path" :component="component"></component-doc>
      </div>
    </section>
    <section id="modules">
      <header>
        <h2>Modules</h2>
      </header>
      <div v-for="(module, path) in modules" :key="path">
        <module-doc :path="path" :module="module"></module-doc>
      </div>
    </section>
  </div>
</template>

<script>
import componentDoc from './component-doc.vue';
import moduleDoc from './module-doc.vue';

import assetPicker from '../shared/form/asset-picker.vue';
import imagePicker from '../shared/form/image-picker.vue';
import responsiveImagePicker from '../shared/form/responsive-image-picker.vue';
import colorPicker from '../shared/form/color-picker.vue';
import datetimePicker from '../shared/form/datetime-picker.vue';
import markdown from '../shared/form/markdown.vue';
import codeEditor from '../shared/form/code-editors/code-editor.vue';
import htmlEditor from '../shared/form/code-editors/html-editor.vue';
import jsEditor from '../shared/form/code-editors/js-editor.vue';
import pagePicker from '../shared/form/page-picker.vue';
import relationPicker from '../shared/form/relation-picker.vue';
import schemaInput from '../schema/schema-input.vue';
import schemaRelation from '../schema/schema-relation.vue';

import field from '../shared/form/field.vue';
import validator from '../shared/form/validator.vue';
import schemaAddButtons from '../schema/schema-add-buttons.vue';
import schemaComponentPart from '../schema/schema-component-part.vue';
import schemaField from '../schema/schema-field.vue';
import schemaPageComponent from '../schema/schema-page-component.vue';

import confirmDialog from '../shared/form/confirm-dialog.vue';
import submit from '../shared/form/submit.vue';
import validatorGroup from '../shared/form/validator-group.vue';
import validatorGroupBase from '../tools/validator-group-base.vue';

import alerter from '../shared/alerter.vue';
import dropdownMenu from '../shared/dropdown-menu.vue';
import editor from '../shared/editor.vue';
import loader from '../shared/loader.vue';
import listing from '../shared/listing.vue';
import modal from '../shared/modal.vue';
import popup from '../shared/popup.vue';

import * as cms from '../cms.js';

export default {
  computed: {
    components() {
      return {
        'Form Input Componenten': {
          '/shared/form/asset-picker.vue': assetPicker,
          '/shared/form/image-picker.vue': imagePicker,
          '/shared/form/responsive-image-picker.vue': responsiveImagePicker,
          '/shared/form/color-picker.vue': colorPicker,
          '/shared/form/datetime-picker.vue': datetimePicker,
          '/shared/form/markdown.vue': markdown,
          '/shared/form/code-editors/code-editor.vue': codeEditor,
          '/shared/form/code-editors/html-editor.vue': htmlEditor,
          '/shared/form/code-editors/js-editor.vue': jsEditor,
          '/shared/form/page-picker.vue': pagePicker,
          '/shared/form/relation-picker.vue': relationPicker,
          '/schema/schema-input.vue': schemaInput,
          '/schema/schema-relation.vue': schemaRelation,
        },
        'Form Field Componenten': {
          '/shared/form/field.vue': field,
          '/shared/form/validator.vue': validator,
          '/schema/schema-add-buttons.vue': schemaAddButtons,
          '/schema/schema-component-part.vue': schemaComponentPart,
          '/schema/schema-field.vue': schemaField,
          '/schema/schema-page-component.vue': schemaPageComponent,
        },
        'Form Componenten': {
          '/shared/form/confirm-dialog.vue': confirmDialog,
          '/shared/form/submit.vue': submit,
          '/shared/form/validator-group.vue': validatorGroup,
          '/tools/validator-group-base.vue': validatorGroupBase,
        },
        'Generieke Componenten': {
          '/shared/alerter.vue': alerter,
          '/shared/dropdown-menu.vue': dropdownMenu,
          '/shared/editor.vue': editor,
          '/shared/loader.vue': loader,
          '/shared/listing.vue': listing,
          '/shared/modal.vue': modal,
          '/shared/popup.vue': popup,
        },
        'Documentatie Componenten': {
          '/docs/component-doc.vue': componentDoc,
          '/docs/module-doc.vue': moduleDoc,
        },
      };
    },
    modules() {
      return {
        '': cms,
      };
    },
  },
  methods: {
    createAnchorName(name) {
      return name.replace(' ', '-');
    },
  },
  components: {
    componentDoc,
    moduleDoc,
  },
};
</script>
