<template>
  <span>
    <span v-html="formattedString" />
    <span v-show="(text || '').length > maxChars">
      <a v-show="!isReadMore" id="readmore" :href="link" @click="triggerReadMore($event, true)">{{ moreStr }}</a>
      <a v-show="isReadMore" id="readless" :href="link" @click="triggerReadMore($event, false)">{{ lessStr }}</a>
    </span>
  </span>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

export default @Component()
class ReadMore extends Vue {
  @Prop({ type: String, default: 'more' }) moreStr;

  @Prop({ type: String, default: 'less' }) lessStr;

  @Prop({ type: String, default: '#' }) link;

  @Prop({ type: Number, default: 200 }) maxChars;

  @Prop({ type: String }) text;

  isReadMore = false;

  get formattedString() {
    let text = this.text || '';
    if (!this.isReadMore && text.length > this.maxChars) {
      text = `${text.substring(0, this.maxChars)}...`;
    }
    return text;
  }

  triggerReadMore(e, b) {
    if (this.link === '#') {
      e.preventDefault();
    }
    if (this.lessStr !== null || this.lessStr !== '') { this.isReadMore = b; }
  }
}
</script>
