<template>
    <div class="autosuggest-container relative z-50 ">
        <vue-autosuggest
          ref="autosuggest"
          @click="clickHandler"
          @keydown.tab.prevent="tabHandler"
          @selected="selectHandler"
          :suggestions="filteredSuggestions"
          :inputProps="inputProps"
          :getSuggestionValue="getSuggestionValue"
        >
          <template slot-scope="{ suggestion }">
            <div>
              <b>{{suggestion.item.title}}</b>
            </div>
          </template>
        </vue-autosuggest>
    </div>
</template>

<page-query>
query Posts {
  places: allPlace {
    edges {
      node {
        id
        path
        title
      }
    }
  }
}
</page-query>

<script>
import { VueAutosuggest } from "vue-autosuggest";

export default {
  components: {
    VueAutosuggest
  },
  data () {
    return {
        suggestions: this.places,
        filteredSuggestions: [],
        inputProps: {
            id:'autosuggest__input',
            onInputChange: this.fetchResults,
        }
    }
  },
  methods: {
    fetchResults(text) {
      this.filteredSuggestions = [{data:this.suggestions.filter(item => {
          return item.title.toLowerCase().indexOf(text.toLowerCase()) > -1;
        })
      }];
    },
    selectHandler(item){
      if (item){
        this.selected = item.item;
      }
    },
    tabHandler(){
      const { listeners, setCurrentIndex, setChangeItem, getItemByIndex } = this.$refs.autosuggest
      setCurrentIndex(0)
      setChangeItem(getItemByIndex(this.$refs.autosuggest.currentIndex), true)
      this.$refs.autosuggest.loading = true
      listeners.selected(true)
    },
    clickHandler(item){
      this.loading=false
      this.fetchResults(item ? item.item.title : "");
    },
    getSuggestionValue(suggestion) {
      const result = suggestion.item;
      return result.title;
    }
  }
}
</script>

<style>
.autosuggest-container {
  display: flex;
  justify-content: center;
}
.autosuggest-container ul {
  width: 100%;
  color: rgba(30, 39, 46,1.0);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 .5rem 0;
}
.autosuggest-container li {
  margin: 0 0 0 0;
  border-radius: 5px;
  padding: 0.75rem 0 0.75rem 0.75rem;
  display: flex;
  align-items: center;
}
.autosuggest-container li:hover {
  cursor: pointer;
}
#autosuggest { width: 100%; display: block;}
.autosuggest__results-item--highlighted {
  background-color: rgba(51, 217, 178,0.2);
}
</style>