<template>
  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
    <ul class="explanations">
      <DefElement :body="explanation" :dictionary="dictionary" :has_article_ref=has_article_ref(explanation) v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
    </ul>
    <div v-if="examples.length">
      <h4>{{example_header}}</h4>
      <ul class="examples">
        <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" />
      </ul>
    </div>
    <ul class="compound_lists">
      <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" />
    </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: {
    explanations: function() {
        return this.body.elements.filter(el => el.type_ == 'explanation')
    },
    examples: function() {
        return this.body.elements.filter(el => el.type_ == 'example')
    },
    compund_lists: function() {
        return this.body.elements.filter(el => el.type_ == 'compound_list')
    },
    example_header: function() {
      return this.dictionary == 'bob' ? 'Eksempel' : 'Døme'
    },
    subdefs: function() {
      // filtrerer bort definisjoner som bare inneholder underartikler
      return this.body.elements.filter(el => el.type_ == 'definition').filter(def => def.elements.filter(el => el.type_ != 'sub_article').length > 0)
    }
  },
  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)
    },
    has_article_ref: function(item){
      if(item.items.length && item.items[0].type_ == "article_ref")
        {
          return "true";
        }
        else{
          return "false";
        }
     }
  },
  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-darken1);
  border-radius: 5px;
}

h4 {
  color: var(--v-primary-base);
  font-size: 14px;
  padding-left: 12px;
  padding-top: 6px;
}

li[has_article_ref="true"] {
  margin-top: 8px;
  margin-left: -25px;
}

</style>