<template>
  <div class="tityl">
    <v-flex
      xs6
      sm6
      md12
      class="searchbar"
    >
      <!-- <autocomplete
    class="searchbarLabel"
    :search="search"
    placeholder="Wyszukaj wydarzenie"
    aria-label="Wyszukaj wydarzenie"
  ></autocomplete> -->
      <autocomplete
        :search="search"
        class="searchbarLabel"
        placeholder="Wyszukaj wydarzenie"
        aria-label="Wyszukaj wydarzenie"
        :get-result-value="getResultValue"
        @submit="handleSubmit"
      />
    </v-flex>
  </div>
</template>

<script>
import Autocomplete from '@trevoreyre/autocomplete-vue'
import '@trevoreyre/autocomplete-vue/dist/style.css'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'NavbarSearch',
  computed: {
    ...mapGetters([
      'allEvents',
      'foundEvents'
    ])
  },
  components: {
    Autocomplete
  },
  methods: {
    search (input) {
      let counter = 0
      let button = false
      let hint = {
        name: 'Pokaż więcej',
        id: 0,
        text: input
      }
      if (input.length <= 1) {
        this.resetFoundEvents()
      }
      if (input.length > 1) {
        this.searchEvent(input)
      }
      return this.foundEvents.map(event => {
        if (counter < 7) {
          counter++
          return event
        }
        if (counter > 4 && button === false) {
          button = true
          return hint
        }
      })
    },
    getResultValue (result) {
      return result.name
    },
    handleSubmit (result) {
      if(result.id === 0) {
        this.$router.push({ path: `search/${result.text}` })
      }
      else {
        this.$router.push({ path: `/event/${result.id}` })
      }
    },
    ...mapActions([
      'searchEvent',
      'resetFoundEvents'
    ])
  }
}
</script>

<style scoped>
.searchbar {
  width: 600px;
  margin-left: 5px;
}

.searchbarLabel {
  font-size: 16px;
  margin-right: 10%;
}

.tityl {
  margin-left: 50px;
  cursor: pointer;
  display: flex;
}
</style>