<template>
  <div>
    <div class="field is-marginless has-addons">
      <p class="control">
        <base-input
          :value="value"
          :data-testid="testId"
          :disabled="disabled"
          :placeholder="placeholder"
          @input="$emit('input', $event)"
          @blur="$emit('blur')"
          @focus="$emit('focus')" />
      </p>
      <p class="control">
        <base-button @click="onCancel">
          <base-icon value="times" />
        </base-button>
      </p>
    </div>
  </div>
</template>

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

import BaseInput from '../input/BaseInput.vue'
import BaseButton from '../button/BaseButton.vue'
import BaseIcon from '../icon/BaseIcon.vue'

@Component({
  name: 'base-search-input',
  components: {
    BaseInput,
    BaseButton,
    BaseIcon
  }
})
export default class BaseSearchInput extends Vue {
  @Prop() readonly value!: string
  @Prop() readonly testId!: string
  @Prop() readonly placeholder!: string
  @Prop() readonly disabled!: boolean
  @Prop({ default: false }) error!: boolean

  onCancel () {
    const event = new InputEvent<string>()
    event.value = null
    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";
@import "bulma/sass/form/input-textarea.sass";
</style>
