<template>
  <div>
    <div class="dropdown" :class="{ 'is-active': active && !disabled }">
      <div class="dropdown-trigger">
        <base-search-input @input="input" @focus="hasFocus = true" :value="value" :disabled="disabled" />
      </div>
      <div class="dropdown-menu">
        <div class="dropdown-content">
          <a
            class="dropdown-item is-family-sans-serif"
            v-for="item in items"
            :key="item[metakey]"
            @click="select(item)">
            {{ item[metavalue] }}
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

import BaseSearchInput from '../input/BaseSearchInput.vue'
import BaseButton from '../button/BaseButton.vue'
import BaseIcon from '../icon/BaseIcon.vue'
@Component({
  name: 'base-autocomplete-select',
  components: {
    BaseSearchInput,
    BaseButton,
    BaseIcon
  }
})
export default class BaseAutocompleteSelect extends Vue {
  @Prop({ default: '' }) value?: string
  @Prop({ default: false }) disabled?: boolean
  @Prop() items!: any[]
  @Prop() metakey!: string
  @Prop() metavalue!: string

  hasFocus = false

  get active () {
    return this.value !== '' && this.hasFocus
  }

  input (event: InputEvent<string>) {
    this.$emit('input', event)
  }

  select (item: any) {
    const event = new ChangeEvent<any>()
    event.value = item
    this.$emit('change', event)
    this.hasFocus = false
  }
}
</script>

<style lang="scss" scoped>
@import "../../core/base/bulma.scss";
@import "bulma/sass/components/dropdown.sass";
</style>
