<template>
  <div>
      {{_text}}<span v-if="hasMoreLink">...</span>
      <span v-if="hasMoreLink" class="morelink" @click="showMore">{{moreLink}}</span>
      <span v-if="hasLessLink" class="morelink" @click="showLess">{{lessLink}}</span>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'MoreLess',
  props: {
    text: {
      type: String,
      required: true
    },
    words: {
      type: String,
      required: true
    },
    moreLink: {
      type: String,
      required: true
    },
    lessLink: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      _text: '',
      hasMoreLink: false,
      hasLessLink: false
    };
  },
  created() {
    this.process() 
  },
  methods: {
    process() {
        let words_arr = this.text.split(' ');
        if(words_arr.length > parseInt(this.words)) {
            let words_asked = words_arr.splice(0, parseInt(this.words));
            this._text = words_asked.join(' ')
            this.hasMoreLink = true
        } else {
            this._text = this.text
        }
    },
    showMore() {
        this._text = this.text
        this.hasMoreLink = false
        this.hasLessLink = true
    },
    showLess() {
        this.process() 
        this.hasMoreLink = true
        this.hasLessLink = false
    }
  }
})
</script>