<template>

  <itf-text-field
    ref="input"
    :value="hoursValue"
    :prepend-icon="prependIcon"
    :item-label="itemLabel"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled"
    :readonly="readonly"
    :negative="negative"
    :delay-input="delayInput"
    @input="onValueChange"
    @blur="onBlur"
  />

</template>
<script>
import { Vue, Watch, Component, Model, Inject, Prop } from 'vue-property-decorator';
import itfTextField from './TextField.vue';
import { parseHours, formatHours } from '../../helpers/formatters';

export default @Component({
  name: 'itfHoursField',
  components: {
    itfTextField
  }
})
class itfHoursField extends Vue {
  @Inject({ default: null }) itemLabel;
  @Model('input') value;
  @Prop() hours;
  @Prop(String) prependIcon;
  @Prop(String) placeholder;
  @Prop(Boolean) clearable;
  @Prop(Boolean) disabled;
  @Prop(Boolean) readonly;
  @Prop(Boolean) negative;
  @Prop({ type: [Number, String], default: 0 }) delayInput;

  mounted() {
    this.onHoursChanged();
  }

  @Watch('hours')
  onHoursChanged() {
    this.$emit('input', this.hours ? formatHours(this.hours) : '');
  }

  get hoursValue() {
    return this.hours ? formatHours(this.hours) : '';
  }

  onValueChange(text) {
  }

  focus() {
    this.$refs.input.focus();
  }

  blur() {
    this.$refs.input.blur();
  }

  onBlur(e) {
    const hours = parseHours(e.target.value) / 60;
    this.$emit('update:hours', hours);
  }
}
</script>
