<template>
  <li>
    <div class="preview">
      <h4>{{searchHit.text ||
            (searchHit._source && searchHit._source.lemmas.map(l => l.lemma) || []).join(',') || 
            "Alle søkeresultater..."}}</h4>
      <h5 v-if="searchHit._source">{{group_list}}</h5>
      {{previewText.substring(0, 40) + (previewText ? '...' : '')}}
    </div>
  </li>
</template>

<script>
import entities from '../utils/entities.js'
import languages from '../utils/languages.js'
import helpers from '../utils/helpers.js'

export default {
  name: 'Preview',
  props: {
    searchHit: Object
  },
  computed: {
    previewText: function(){
      if (! this.searchHit._source) return ''
      let element = this.searchHit._source.body.definitions[0]
      while (element.type_ == 'definition') element = element.elements[0]
      if (element.type_ == 'example') {
        element = element.quote
      } else if (! element.content){
        element = {content: '', items: []}
      }

      let replacements = element.items.map(item => item.text ||
                                           item.string ||
                                           entities[item.id] ||
                                           languages[item.id] ||
                                           item.id ||
                                           (item.lemmas || []).join(',')).reverse()

      let replacement = () => replacements.pop()

      return element.content.replace(/\$/gi, replacement)
    },
    group_list: function() {
      return helpers.group_list(this.searchHit._source.lemmas)
    }
  },
  components: {

  }
}

</script>
<style scoped>
h4, h5 {
    padding: 0px;
    margin: 0px;
}
</style>