<template>
  <div
    v-if="template.type === 'object'"
    class="editor"
  >
    <p v-text="template.name" />
    <ConfigEditor
      v-for="(prop,key) of template.properties"
      :key="key"
      :template="prop"
      :config="config[prop.name]"
    />
  </div>
  <div
    v-else-if="template.type === 'array'"
    class="editor"
  >
    <ConfigEditor
      v-for="(child,key) of config"
      :key="key"
      :config="child"
      :template="template.child"
    />
    <button type="button">
      add
    </button>
  </div>
  <div
    v-else-if="template.type === 'string'"
    class="editor"
  >
    <label v-text="template.name || ''" />
    <input
      v-model="config"
      type="text"
    >
  </div>
  <div
    v-else-if="template.type === 'number'"
    class="editor"
  >
    <label v-text="template.name || ''" />
    <input
      v-model="config"
      type="number"
    >
  </div>
  <div
    v-else-if="template.type === 'boolean'"
    class="editor"
  >
    <label v-text="template.name || ''" />
    <input
      v-model="config"
      type="checkbox"
    >
  </div>
  <pre v-else>
    invalid config
  </pre>
</template>

<script>
export default {
  name:  'ConfigEditor',
  props: {
    // eslint-disable-next-line vue/require-prop-types
    config:   { required: true },
    template: {
      type:     Object,
      required: true
    }
  }
};
</script>

<style scoped>
.editor {
  border: 1px solid black;
  margin-left: 10px;
}
</style>
