<template>
  <div class="form-group">
    <div v-if="type == 'array'">
      <h4>{{ schema.title }}</h4>
      <draggable :list="valueCopy" :options="{ghostClass: 'vuedraggable-ghost', handle: '.vuedraggable-handle'}">
        <section v-for="(item, key) in valueCopy" class="mb-2">
          <schema-page-component v-if="valueCopy[key]" v-model="valueCopy[key]" :schema="schema.items" :is-draggable="true" v-on:deleteComponent="deleteComponent(key)"></schema-page-component>
        </section>
      </draggable>

      <schema-validator :value="valueCopy" :schema="schema"></schema-validator>
      <schema-add-buttons v-model="valueCopy" :has-list="true" :schema="schema.items" v-if="(!schema.maxLength || valueCopy.length < schema.maxLength) && !schema.isReadOnly"></schema-add-buttons>
    </div>

    <div v-if="type == 'object' && valueCopy">
      <h4 v-if="schema.oneOf">{{ schema.title }}</h4>
      <schema-page-component v-model="valueCopy" :schema="schema"></schema-page-component>
    </div>

    <field :label="schema.oneOf ? schema.title : ''" :info="schema.description" v-if="type == 'object' && !valueCopy && !schema.isReadOnly" no-focus>
      <schema-validator :value="valueCopy" :schema="schema"></schema-validator>
      <schema-add-buttons v-model="valueCopy" :schema="schema"></schema-add-buttons>
    </field>

    <!-- components with a custom-editor -->
    <div v-if="type == 'other'">
      <!-- for schema.type=object -->
      <div v-if="schema.type == 'object'" class="row">
        <div class="col-sm-12">
          <schema-page-component v-if="valueCopy" v-model="valueCopy" :schema="schema"></schema-page-component>
          <schema-validator :value="valueCopy" :schema="schema"></schema-validator>
        </div>

        <div class="col-sm-8 offset-sm-4">
          <schema-add-buttons v-model="valueCopy" :schema="schema" v-if="!valueCopy"></schema-add-buttons>
        </div>
      </div>

      <!-- for ex schema.type=array -->
      <component v-else :is="schema.format" v-model="valueCopy" :schema="schema" :required="!!schema.required"></component>
    </div>
  </div>
</template>

<script>
import { ValueSyncMixin } from '../shared/value-sync-mixin.js';
import field from '../shared/form/field.vue';
import schemaAddButtons from './schema-add-buttons.vue';
import schemaPageComponent from './schema-page-component.vue';
import schemaValidator from './schema-validator.vue';

export default {
  docs: `Genereert een interface voor component-onderdelen groter dan een veld.`,
  mixins: [ValueSyncMixin],
  props: {
    value: {
      required: true
    },
    schema: {
      type: Object,
      required: true
    }
  },
  computed: {
    type() {
      return this.schema.format && this.schema.format != 'schema-component-part' ? 'other' : this.schema.type;
    }
  },
  methods: {
    deleteComponent(index) {
      this.valueCopy.splice(index, 1);
    }
  },
  components: {
    field,
    schemaAddButtons,
    schemaPageComponent,
    schemaValidator
  }
}
</script>
