<template>
  <main id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <header>
      <autocomplete :debounceTime="100" :auto-select="true" :search="search"  @submit="select_result" placeholder="søk..." ref="search">
        <template #result="{result, props}">
          <Preview v-bind="props" :searchHit="result">
          </Preview>
        </template>
      </autocomplete>
      <input type="radio" id="radio_both" value="nob,nno" v-model="lang">
      <label for="radio_both">Begge</label>
      <input type="radio" id="radio_nob" value="nob" v-model="lang">
      <label for="radio_nob">Bokmål</label>
      <input type="radio" id="radio_nno" value="nno" v-model="lang">
      <label for="radio_nno">Nynorsk</label>
      -----
      <input type="radio" id="radio_norsk" value="norsk_ordbok" v-model="lang">
      <label for="radio_norsk">Norsk Ordbok</label>
    </header>
    <img id="spinner" :class="waiting ? 'show' : 'hide'" src="./assets/spinner.gif" alt="Venter på innhold" />
    <SearchResults :hits="search_results" :lang="lang" @search-hit-click="search_hit_click" />
    <Article :key="article_key" :article="article" @article-click="article_link_click" />
  </main>
</template>

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

var api_endpoint = 'https://ordbok-dev.aws.uib.no/cache/article'

window.onpopstate = function (event) {
  if (event.state) {
    app.__vue__._data.article = event.state.article
    app.__vue__._data.search_results = event.state.search_results
    app.__vue__._data.lang = event.state.lang
  }
}

export default {
  name: 'app',
  data: function() {
    return {
      article_key: 0,
      search_results: [],
      lang: 'nob',
      waiting: true,
      article: {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
    }
  },
  computed: {
    search: function() {
      let self = this
      return function(q) {
                return new Promise(resolve => {
                  return axios.post(api_endpoint + '/' + self.lang + '/_search/',
                                    {
                                        "suggest": {
                                          "suggest" : {
                                            "prefix" : q,
                                            "completion" : {
                                              "field" : "suggest",
                                              "size": 10
                                            }
                                          }
                                        }
                                      }).then(function(response) {
                                        let hits = q.length ? [{q: q}] : []
                                        hits = hits.concat(response.data.suggest.suggest[0].options.sort((o1, o2) => o1.text.length - o2.text.length))
                                        resolve(hits)
                                      })
                                    })
        }
      }
    },
  components: {
    Article,
    Autocomplete,
    SearchResults,
    Preview
  },
  methods: {
    select_result: function(event) {
      this.$refs.search.value = ''
      document.activeElement.blur()
      if(event._source){
        this.$router.push('/' + event._index + '/' + event._id)
        this.search_results = []
        this.article = event._source
        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
      }else{
        var self = this
        self.waiting = true
        self.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
        axios.get(api_endpoint + '/' + self.lang + '/_search?q=' + event.q + ' ' + event.q + '*&size=20')
        .then(function(response){
          self.$router.push('/' + `/search?q=${event.q}&lang=${self.lang}`)
          self.search_results = response.data.hits.hits
          self.waiting = false
          history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
        })
      }
    },
    article_link_click: function(item) {
      var self = this
      if (this.article.article_id == item.article_id){
        this.article_key++
        history.replaceState({article: this.article, search_results: this.search_results, lang: this.lang}, '')
      }else{
        self.article = {lemmas: [], body:{pronunciation: [], definitions: [], etymology: []}}
        self.waiting = true
        axios.get(api_endpoint + '/' + self.lang + '/' + item.article_id)
        .then(function(response){
          self.article = response.data._source
          self.waiting = false
          history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
        })
      }
    },
    search_hit_click: function(article){
      this.search_results = []
      this.article = article
      history.replaceState({article: article, search_results: [], lang: this.lang}, '')
    }
  },
  mounted: function(){
    this.lang = this.$route.params.lang || this.$route.query.lang || 'nob,nno'
    var self = this;
    if(this.$route.query.q) {
      axios.get(api_endpoint + '/' + self.lang + '/_search?q=' + self.$route.query.q + ' ' + self.$route.query.q + '*&size=20')
      .then(function(response){
        self.search_results = response.data.hits.hits
        self.waiting = false
        history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
      })
    }
    else if(this.$route.params.id){
      axios.get(api_endpoint + '/' + self.lang + '/' + self.$route.params.id)
      .then(function(response){
        self.article = response.data._source
        self.waiting = false
        history.replaceState({article: self.article, search_results: self.search_results, lang: self.lang}, '')
      })
    }
    else {
      this.waiting = false
    }
  },
  watch: {
    $route(to, from) {
      this.lang = this.$route.params.lang || this.$route.query.lang || 'nob,nno'
    }
  }
}
</script>

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Inria+Serif:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

#app {
  font-family: 'Noto Sans', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 60px;
  margin-left: 500px;
  margin-right: 300px;
}

.show {
  display: block;
}

.hide {
  display: none;
}

.autocomplete {
  width: 25em;
}

.autocomplete-result-list {
  max-height: 500px;
}
</style>