<template>
  <input :id="inputId" :data-testid="testId" :class="{ 'input': true, 'is-danger': error }" type="text" :value="value" @focus="onFocus" @input="onInput" @blur="onBlur" />
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'
import InputEvent from '../../core/events/InputEvent'

@Component({
  name: 'base-input'
})
export default class BaseInput extends Vue {
  @Prop() readonly value!: string
  @Prop() readonly inputId!: string
  @Prop() readonly testId!: string
  @Prop() readonly disabled!: boolean
  @Prop({ default: false }) error!: boolean

  onInput ($event: any) {
    const event = new InputEvent<string>()
    event.value = $event.target.value
    this.$emit('input', event)
  }

  onBlur () {
    this.$emit('blur')
  }

  onFocus () {
    this.$emit('focus')
  }
}
</script>

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