<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <div class="">
      <autocomplete :search="search" :get-result-value="result_view" @submit="select_result" placeholder="søk..."></autocomplete>
    </div>
    <Article :article="article" />
  </div>
</template>

<script>
import axios from "axios";
import Article from './components/Article.vue'
import Autocomplete from '@trevoreyre/autocomplete-vue'
import '@trevoreyre/autocomplete-vue/dist/style.css'

window.onpopstate = function (event) {
  if (event.state) {
    console.log(event)
    app.__vue__._data.article = event.state
  } else {
    console.log(event)
  }
}

export default {
  name: 'app',
  data: function() {
    return {
      article_id: parseInt(window.location.href.split("/").pop()),
      article: {lemmas: []},
      search: function(q) {
        return new Promise(resolve => {
          return axios.post('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_search/',
                            {
                                "suggest": {
                                  "suggest" : {
                                    "prefix" : q,
                                    "completion" : {
                                      "field" : "suggest"
                                    }
                                  }
                                }
                              }).then(response => resolve(response.data.suggest.suggest[0].options))
        })
      },
      result_view: function(result) {
        return result._source.lemmas.map(x => x.word).join(', ')
      }
    }
  },
  components: {
    Article,
    Autocomplete
  },
  methods: {
    select_result: function(event) {
      this.article = event._source
      history.pushState(this.article, this.article.lemmas.map(x => x.word).join(', '), event._id)
    }
  },
  mounted: function(){
    var self = this;
    axios.get('https://search-ordbok-prototype-6qpfmm6fz5jvy5ba3e6blryeqe.eu-west-1.es.amazonaws.com/ordbok/_doc/' + self.article_id)
      .then(function(response){
        self.article = response.data._source
        history.replaceState(self.article, self.article.lemmas.map(x => x.word).join(', '))
      })

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  margin-left: 30%;
}

.autocomplete {
  width: 25em;
}
</style>