<template>
  <div class="form-group">
    <div v-if="type == 'array'">
      <div class="form-group-title">
        <h4>{{ schema.title }}</h4>
        <info-tooltip :info="schema.description" />
      </div>

      <draggable :list="valueCopy" handle=".vuedraggable-handle" ghost-class="vuedraggable-ghost">
        <section v-for="(item, key) in valueCopy" :key="item.id" class="mb-2">
          <schema-page-component
            v-if="valueCopy[key]"
            v-model="valueCopy[key]"
            :schema="schema.items"
            :is-draggable="!schema.isReadOnly"
            :parent-is-read-only="schema.isReadOnly"
            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"
        :one-of-title="schema.title"
        :schema="schema.items"
        v-if="(!schema.maxLength || valueCopy.length < schema.maxLength) && !schema.isReadOnly"
      ></schema-add-buttons>
    </div>

    <div v-if="type == 'object' && valueCopy">
      <div class="form-group-title">
        <h4 v-if="schema.oneOf">{{ schema.title }}</h4>
        <info-tooltip :info="schema.description" />
      </div>

      <schema-page-component v-model="valueCopy" :schema="schema"></schema-page-component>
    </div>

    <field
      :label="schema.oneOf ? schema.title : ''"
      :info="schema.description"
      :schema="schema"
      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" :one-of-title="schema.title"></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" :one-of-title="schema.title"></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>

<style scoped>
.form-group-title {
  display: flex;
}
</style>

<script>
import { ValueSyncMixin } from '../shared/value-sync-mixin.js';
import field from '../shared/form/field.vue';
import infoTooltip from '../shared/info-tooltip.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,
    infoTooltip,
    schemaAddButtons,
    schemaPageComponent,
    schemaValidator
  },
  watch: {
    'valueCopy.length': {
      handler: function (value) {
        if (value) {
          this.valueCopy.forEach((x) => x?.id || (x.id = Math.random().toString(16).slice(2)));
        }
      },
      immediate: true
    }
  }
};
</script>
