<template>
  <base-fieldset
    :label="label">
    <meta-type-field
      v-for="entry in template"
      :test-id="entry.testId"
      :input-id="entry.inputId"
      :key="entry.key"
      :template="entry"
      :value="value[entry.key]"
      @input="onInput(entry.key, $event)" />
  </base-fieldset>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import cloneDeep from 'lodash.clonedeep'

import BaseFieldset from '../../elements/form/BaseFieldset.vue'

import MetaTypeField from '../field/MetaTypeField.vue'
import InputEvent from '../../core/events/InputEvent'

interface MetaTemplate {
  type: string;
  key: string;
  label: string;
  required: boolean;
  disabled: boolean;
  values: any[];
}

@Component({
  components: {
    BaseFieldset,
    MetaTypeField
  }
})
export default class MetaObjectFieldset extends Vue {
  @Prop() template!: MetaTemplate[]
  @Prop() value!: any
  @Prop() label!: string

  onInput ($key: string, $event: InputEvent<any>) {
    const value = cloneDeep(this.value)
    value[$key] = $event.value
    const event = new InputEvent<any>()
    event.value = value
    this.$emit('input', event)
  }
}
</script>
