<template>
  <field :label="schema.title" :info="schema.description">
    <schema-relation v-if="showSchemaRelation" v-model="valueCopy" :schema="schema" :reference="reference"></schema-relation>
    <external-relation v-else-if="showExternalRelation" v-model="valueCopy" :schema="schema" :reference="schema.externalReference"></external-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 * as formElements from '../shared/form/all.js';
import schemaInput from './schema-input.vue';
import schemaRelation from './schema-relation.vue';
import externalRelation from "../shared/form/external-relation";

export default {
  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
      showExternalRelation: !!this.schema.externalReference && !this.schema.format, // don't show it when it has a custom editor
    };
  },
  components: {
    externalRelation,
    ...formElements,
    schemaInput,
    schemaRelation,
  },
};
</script>
