<!-- eslint-disable -->
<template>
  <div class="header">
    <span class="dict-label">{{dict_label}}</span>
    <div v-bind:class="{ 'lookup': $route.name=='lookup'}" v-for="(lemma_group, i) in lemma_groups" :key="i">
      <div v-if="$route.name!='lookup'">
        <router-link 
                 :id="title_id" 
                 :to="$parent.link_to_self.ref" 
                 @click.native="$parent.details_click($parent.link_to_self)"
                 v-bind:class="{'long_lemma': long_lemma}"
                 class="article_header">
    <h2>
                <!--
      
    --><span v-for="(lemma, index) in lemma_group.lemmas" 
          :key="index">{{lemma.lemma}}<!--
          --><span v-if="lemma.hgno"
                   :aria-label="'Betydning nummer ' + parseInt(lemma.hgno)" 
                   :title="'Betydning nummer '+parseInt(lemma.hgno)"
                   class="hgno">{{" "+roman_hgno(lemma)}}</span><!--
                    --><span 
                   class="title_comma" 
                   v-if="lemma_group.lemmas[1] && index < lemma_group.lemmas.length-1">{{", "}}
                  </span>
    </span>
</h2>
    <span class="subheader">
    <span class="header_group_list" 
          v-if="lemma_group.description">{{lemma_group.description}}</span>
          {{lemma_group.genus}}
    <span v-if="$store.state.showInflectionNo">{{lemma_group.inflection_classes}}</span>
    
    </span>

    </router-link></div><div v-else><h2>
    
      
    <span  :id="title_id" v-for="(lemma, index) in lemma_group.lemmas" 
          :key="index">{{lemma.lemma}}<!--
          --><span v-if="lemma.hgno"
                   :aria-label="'Betydning nummer ' + parseInt(lemma.hgno)" 
                   :title="'Betydning nummer '+parseInt(lemma.hgno)"
                   class="hgno">{{" "+roman_hgno(lemma)}}</span><!--
                    --><span 
                   class="title_comma" 
                   v-if="lemma_group.lemmas[1] && index < lemma_group.lemmas.length-1">{{", "}}
                  </span>
    </span>

    </h2>
    <span class="subheader">
        <span class="header_group_list" 
          v-if="lemma_group.description">{{lemma_group.description}}</span>
    <span v-if="$store.state.showInflectionNo">{{lemma_group.inflection_classes}}</span>
    </span>
    
    </div>
    

        <span v-if="!lemma_groups[1] && $parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
    <span v-for="(subitem, index) in highlight_hits($parent.snippet, {fulltext_highlight: $parent.fulltext_highlight})" :key="index" :class="subitem.type">{{subitem.text}}</span>
    </span> 

    </div>

    <SplitInf v-if="!$parent.collapsed" :lemmas="lemmas"/>
                   
    <span v-if="$parent.collapsable" >
          <v-btn class="expand_icon" v-if="$parent.collapsed"
           text
           small
           @click="$emit('toggle-collapse')">
           {{$t('article.show')}}
           <v-icon small right>expand_more</v-icon></v-btn>
           <v-btn class="expand_icon" v-else
           text
           small
           @click="$emit('toggle-collapse')">
           <v-icon small>expand_less</v-icon></v-btn>
           
           </span> 
  </div>
</template>

<script>
  /* eslint-disable */
import helpers from '../utils/helpers.js'
import SplitInf from './SplitInf.vue'

export default {
  name: 'Header',
  props: {
    lemmas: Array,
    dictionary: String,
    article_id: Number,
    title_id: String
  },
    data: function() {
    return {
      long_lemma: false
    }
  },
  components: {
    SplitInf
  },
  mounted: function() {
    if (this.$el.scrollWidth > this.$el.offsetWidth) {
      this.long_lemma = true
    }

  },
  methods: {
    highlight_hits: helpers.highlight_hits,
    roman_hgno: helpers.roman_hgno,
    inflection_classes: function(lemmas) {
      let inf_classes = new Set()
      let ureg = false
      lemmas.forEach((lemma, i) => {
        if (lemma.inflection_class) inf_classes.add(lemma.inflection_class)
        else ureg = true
      })
      if (inf_classes.size){

      let class_array = Array.from(inf_classes).sort()
      if (ureg) class_array.push("ureg.")
      let class_list
      if (class_array.length < 3) {
        class_list = class_array.join(" og ")
      }
      else {
        class_list = class_array.slice(0, -1).join(", ") + " og " + class_array[class_array.length -1]
      }
      return " ("+ class_list +")"
      }
    }
  },
  computed: {
    content_locale: function() {
      return this.$parent.content_locale
    },
    secondary_header_text: function() {
      let a_forms = []
      this.lemmas.forEach((lemma, i) => {
        if (lemma.paradigm_info[0] && lemma.paradigm_info[0].inflection_group == 'VERB') {
          let inf2 = lemma.paradigm_info[0].inflection[1] && lemma.paradigm_info[0].inflection[1].word_form
          if (inf2 && inf2.length) {
            a_forms.push(inf2)
          }
        }
      });
      return a_forms.join(', ')
    },
    dict_label: function() {
      return {
        'bm': 'bokmålsordboka',
        'nn': 'nynorskordboka'
      }[this.dictionary] || ''
    },
    hgno_arabic: function() {
    let hgnos = []
    this.lemmas.forEach(lemma => {
      let hgint = parseInt(lemma.hgno)
      if (hgint > 0) {
        hgnos.push(hgint)
        }
    })
    return hgnos
    },
    lemma_groups: function() {
      let groups = [{lemmas: this.lemmas}]
      try {
        if (this.lemmas[0].paradigm_info[0] && this.lemmas[0].paradigm_info[0].tags[0] != 'NOUN' && this.lemmas[0].paradigm_info[0].tags[0] != 'EXPR') {
          groups = [{description: this.$t('tags.'+this.lemmas[0].paradigm_info[0].tags[0], this.content_locale), lemmas: this.lemmas}]
        }
        else if (this.lemmas[0].paradigm_info[0].tags[0] == 'NOUN') {
            let genus_map  = {}
            let self = this
            this.lemmas.forEach(lemma =>{
              let genera = new Set()
              lemma.paradigm_info.forEach(paradigm => {
                genera.add(paradigm.tags[1])
              })
              let genus_description = ""
              if (genera.size == 3) {
                genus_description += self.$t('tags.Masc') + ', ' + self.$t('tags.Fem', self.content_locale) + self.$t('or') + self.$t('tags.Neuter', self.content_locale)
              } else {
                genus_description += Array.from(genera).map(code => self.$t('tags.'+code, self.content_locale)).sort().join(self.$t('or'))
              }            
              if (genus_map[genus_description]) {
                genus_map[genus_description].push(lemma)
              }
              else {
                genus_map[genus_description] = [lemma]
              }
            })
            groups = Object.keys(genus_map).map(key => {
              return {description: self.$t('tags.NOUN', self.content_locale), genus: key, lemmas: genus_map[key], }
            })

        groups.forEach((lemma_group, index) => {
              groups[index]['inflection_classes'] = this.inflection_classes(lemma_group.lemmas)
            })
        }
    } catch(error) {
      console.error("lemma_groups",this.article_id, this.dictionary, error.message)
      this.$parent.invalid = true
      //console.error(error)
    }
      return groups
    },
  }
}

</script>

<style>


article h2 {
  padding-top: 4px;
  padding-bottom: 0px;
  font-family: Inria Serif;
}

.sm h2, .xs h2 {
  font-size: 22px;
}

article h2.secondary_header {
  padding-top: 0px;
  padding-bottom: 4px;
}

.info-button {
  margin-left: 6px;
  margin-right: -2px;
  height: 10px;
  width: 10px;
}

.word-classification {
  text-decoration: underline dashed;
}

.dict-label {
  color: var(--v-primary-base)  ;
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 24px;
  font-variant-caps: all-small-caps;
}



div.lemma {
  display: none;
}



.article_header {
  overflow:auto;
  word-wrap: normal;
  text-decoration: none;
}

h2 a {
  text-decoration: none !important;
  color: var(--v-primary-base) !important;
}


.long_lemma {
  font-size: 18px !important;

}

.hgno {
  color: var(--v-text-base) !important;
  font-family: unset;
  font-size: 16px;
  font-weight: normal;
}


.expand_icon {
    justify-content: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-right: 24px !important;
    width: 100%;
    border-bottom-right-radius: 28px;
    border-bottom-left-radius: 28px;
}

.subheader {
  color: var(--v-text-base);
  font-weight: normal;
  font-style: italic;
  font-size: 14px;
}


.header_group_list {
  font-variant: all-small-caps;
  font-style: normal;
  font-size: 18px;
}




</style>