<template>
  <div v-if="isHtml" v-html="schema.default"></div>
  <field :label="schema.title" :info="schema.description" :schema="schema" v-else>
    <schema-relation v-if="showSchemaRelation" v-model="valueCopy" :schema="schema" :reference="reference"></schema-relation>
    <schema-input v-else v-model="valueCopy" :schema="schema"></schema-input>
    <slot></slot>
  </field>
</template>

<script>
import { ValueSyncMixin } from '../shared/value-sync-mixin.js';
import formElements from '../shared/form/all';
import schemaInput from './schema-input.vue';
import schemaRelation from './schema-relation.vue';

export default {
  name: 'schema-field',
  docs: `Genereert een compleet formulierveld op basis van een JSON schema.`,
  mixins: [ValueSyncMixin],
  props: {
    value: {
      required: true,
      demoValue: '42'
    },
    schema: {
      type: Object,
      required: true,
      demoValue: () => ({ type: 'number', title: 'Nummer' })
    },
    reference: {
      type: String,
      required: false
    }
  },
  data() {
    return {
      showSchemaRelation: !!this.reference && !this.schema.format, // don't show it when it has a custom editor
      isHtml: this.schema.type === 'html'
    };
  },
  components: {
    ...formElements,
    schemaInput,
    schemaRelation
  }
};
</script>
