<template>
  <VueTooltipster :showClosebutton="false">
    <h1>{{header_text}}</h1><span class="word-classification">{{group_list}}</span>
    <div slot="content" class="tooltip">
      <div v-for="lemma in lemmas">
        <h4>{{lemma.word}}</h4>
        <table v-for="grp in lemma.inflection_groups">
          <tr>
            <th rowspan="2">{{grp.group_designation}}</th>
            <th v-for="form in grp.forms">{{form}}</th>
          </tr>
          <tr>
            <td v-for="inflection in grp.inflections">{{inflection}}</td>
          </tr>
        </table>
      </div>
    </div>
  </VueTooltipster>
</template>

<script>
import VueTooltipster from './vue-tooltipster.vue';
import jQuery from 'jquery';
window.jQuery = jQuery;

export default {
  name: 'Header',
  props: {
    lemmas: Array
  },
  computed: {
    header_text: function() {
      return this.lemmas.map(
        function(item){
          return item.word
        }
      ).join(', ')
    },
    group_list: function() {
      var grp_collection = new Set()
      this.lemmas.forEach(function(lemma){
        lemma.inflection_groups.forEach(function(grp){
          grp_collection.add(grp.group_designation)
        })
      })
      return Array.from(grp_collection).join(';')
    }
  },
  components: {
    VueTooltipster
  }
}
</script>

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

h1 {
  display: inline;
}

.tooltip {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.tooltip table {
  border-collapse: collapse;
  margin: 10px;
}

.tooltip td, .tooltip th {
  border: solid;
  border-width: 1px;
  margin: 0px 0px 0px 0px;
  padding: 3px;
}
</style>