<template>
  <component
    v-if="component"
    class="h-100 w-100 d-flex align-items-center"
    :is="component"
    :value="value"
    :field="field"
    :focused="focused"
    :editable="editable"
    @input="$emit('input', $event)"
    @focus="onFocus(); $emit('focus')"
    @blur="onBlur(); $emit('blur')"
  />
</template>
<script>
import { Vue, Component, Model, Prop } from 'vue-property-decorator';
import itfIcon from '../icon/Icon';
import itfButton from '../button/Button';
import { INLINE_TYPES } from './constants';

export default @Component({
  name: 'itfPropertyInlineEdit',
  components: {
    itfIcon,
    itfButton,
  }
})

class itfPropertyInlineEdit extends Vue {
  @Model('input') value;
  @Prop() field;
  @Prop(Boolean) focused;
  @Prop(Boolean) editable;

  isFocused = false;

  onFocus() {
    this.isFocused = true;
  }

  onBlur() {
    this.isFocused = false;
  }

  get component() {
    if (!this.field) {
      return null;
    }
    const type = INLINE_TYPES.find(({ Type }) => Type === this.field.Type);
    return type ? type.Component : null;
  }
}
</script>
