/* eslint-disable no-undef */
/// ///////////////////////////////////////////////////////////
/// /////////////////// custom text splitor created by ammiiir1
/// ////// (amir.i.iii.vii.iii@gmail.com | ammiiir1@gmail.com )
// (https://gitlab.com/ammiiir1 | https://github.com/ammiiir1)

import Vue from 'vue'

class ATextSplitterVuePlugin {
  /// ///////////////////////////////////////////////////////////////////////////////////
  /// text animation#1
  // .staggerFrom($("#txtID .tsWords"), 0.5, {cycle: {y: [20, -20]}, opacity: 0}, 0.1, 0)
  // ************************************************************************************
  /// text animation#2
  // .staggerFrom($("#txtID .tsLetters"), 0.2, {scale: 5, opacity: 0}, 0.07)
  // ************************************************************************************
  // text animation#3
  // .staggerFrom($("#txtID .tsWords"), 0.4, {scale:2,opacity: 0}, 0.015,1.4)
  // ************************************************************************************
  /// text animation#4
  // .staggerFrom($("#txtID .tsWords"), 0.3, {opacity: 0}, 0.07)
  // ************************************************************************************
  constructor({ rtl = false, letterSpace = 0, wordSpace = '3px' } = {}) {
    // options
    this.rtl = rtl
    this.letterSpace = letterSpace + 'px'
    this.wordSpace = wordSpace + 'px'
    // pipeline vars
    this.word = ''
    this.letterSpans = ''
    this.wordSpans = ''
  }

  /// /////////////////////////////////////////////// private classes
  _split(strOrId, isElement = true) {
    // pipeline
    const line = isElement ? $(`#${strOrId}`).text() : strOrId // get the sentence
    const parts = line.split(' ')
    for (let i = 0; i < parts.length; i++) {
      // how many words
      this.letterSpans = ''
      this.word = parts[i]

      for (let j = 0; j < this.word.length; j++) {
        // how many letters in each words
        this.letterSpans += '<span class="tsLetters">' + this.word[j] + '</span>' // creat a span for each letter
      }
      this.wordSpans += '<span class="tsWords">' + this.letterSpans + ' </span>'
    }
  }

  _setStyles(txtID) {
    $(`#${txtID} .tsLetters`).css({
      display: this.rtl ? 'inline' : 'inline-block',
      marginRight: this.rtl ? 0 : this.letterSpace,
      marginLeft: this.rtl ? this.letterSpace : 0
    })
    $(`#${txtID} .tsWords`).css({
      display: 'inline-block',
      marginRight: this.rtl ? 0 : this.wordSpace,
      marginLeft: this.rtl ? this.wordSpace : 0
    })
  }

  /// /////////////////////////////////////////////// output methods
  injectToElement(txtID) {
    this._split(txtID, true)
    $(`#${txtID}`).html(this.wordSpans) // render the sentence
    this._setStyles(txtID)
  }

  returnString(str) {
    this._split(str, false)
    return this.wordSpans // return splitted string
  }
}

Vue.prototype.$ATextSplitter = ATextSplitterVuePlugin