<template>
  <div class="field is-horizontal" style="width: 100%">
    <div class="field-body">
      <div class="field">
        <p class="control">
          <base-input
            :value="value[metakey]"
            :disabled="disabled !== false"
            @input="onInput(metakey, $event)"/>
        </p>
      </div>
      <div class="field">
        <p class="control">
          <base-input
            :value="value[metavalue]"
            :disabled="disabled !== false"
            @input="onInput(metavalue, $event)"/>
        </p>
      </div>
    </div>
  </div>
</template>

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

import InputEvent from '../../core/events/InputEvent'

import BaseInput from '../../elements/input/BaseInput.vue'

interface Dictionary {
  [metakey: string]: any;
}

@Component({
  components: {
    BaseInput
  }
})
export default class KeyValueField extends Vue {
  @Prop() value!: Dictionary
  @Prop({ default: false }) disabled!: boolean
  @Prop({ default: 'key' }) metakey!: string
  @Prop({ default: 'value' }) metavalue!: string

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

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/form/shared.sass";
@import "bulma/sass/form/tools.sass";
</style>
