<template>
  <li :class="body.type_">
    <span v-for="(item, index) in assemble_text"
          :class="item.type_"
          :key="index">
          {{item.html}}
          <router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)" v-html="item.label">
          </router-link>
    </span>
  </li>
</template>

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

export default {
  name: 'DefElement',
  props: {
    body: Object
  },
  computed: {
    unparsed: function(){
      return this.body.items.map(
        function(item){
          if      (item.type_ == 'usage') return {type: item.type_, html: item.text}
          else if (item.type_ == 'article_ref') return {
                                                          type: item.type_,
                                                          html: '',
                                                          label: item.lemmas.join(',') + (item.definition_order ? ` (${item.definition_order})` : ''),
                                                          ref: item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
                                                          article_id: item.article_id,
                                                          definition_id: item.definition_id
                                                        }
          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
          else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || item.id}
          else return {type: item.type_ || 'plain', html: item}
        }
      )
    },
    assemble_text: function(){
      var old_parts = this.body.content.split(/(\$)/)
      var text_items = this.unparsed.slice(0).reverse()
      var new_parts = []
      old_parts.forEach(function(item){
        if(item == '$') {
          new_parts.push(text_items.pop())
        } else if (item.length) {
          new_parts.push({type: 'plain', html: item})
        }
      })
      return new_parts
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
span.usage, span.pronunciation {
  font-style: italic;
}

span.language {
  font-weight: bold;
}


</style>