<template>
  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
    <ul class="explanation">
      <li :is="element_wrapper.template" :body="element_wrapper.element" :dictionary="element_wrapper.dictionary" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li>
    </ul>
    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
      <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
    </div>
  </li>
</template>

<script>
import DefElement from './DefElement.vue'
import Example from './Example.vue'
import CompoundList from './CompoundList.vue'

var Definition = {
  name: 'Definition',
  props: {
    body: Object,
    level: Number,
    dictionary: String
  },
  components: {
    DefElement,
    Definition,
    Example,
    CompoundList
  },
  computed: {
    template_name_added: function(){
      let dictionary = this.dictionary
      return this.body.elements.filter(el => ! ['definition', 'sub_article'].includes(el.type_)).map(
        function(element){
          return {
              'template': {
                'explanation': 'DefElement',
                'example': 'Example',
                'compound_list': 'CompoundList'
              }[element.type_] || 'li',
              'element': element,
              'dictionary': dictionary
          }
      })
    },
    subdefs: function() {
      return this.body.elements.filter(el => el.type_ == 'definition')
    }
  },
  mounted: function() {
    let ref = 'def' + this.body.id
    if(location.hash.substring(1) == ref){
      this.$refs[ref].scrollIntoView()
      this.$refs[ref].classList.add('highlighted')
    }
  },
  methods: {
    article_link_click: function(item) {
      this.$emit('article-click', item)
    }
  },
  watch:{
    $route(to, from) {
      let ref = 'def' + this.body.id
      if(location.hash.substring(1) == ref){
        this.$refs[ref].classList.add('highlighted')
      }else{
        this.$refs[ref].classList.remove('highlighted')
      }
    }
  }
}

export default Definition
</script>
<style>
q {
  font-style: italic;
}

.highlighted {
  background-color: var(--v-tertiary-base);
  border-radius: 5px;
}
</style>