/**
 *  Read More JS
 *  Truncates text via specfied character length with more/less actions.
 *  Maintains original format of pre truncated text.
 *  @author stephen scaff
 *  @todo   Add destroy method for ajaxed content support.
 *
 */

 const ReadMore = (() => {
   let s;
   let read_more = window.read_more_text;
   let read_less = window.read_less_text;
   let originalContentArr = [];
   let truncatedContentArr = [];   
   return {

     settings() {
       return {
         content: document.querySelectorAll('.js-read-more'),
         post_ids:[],
         moreLink: 'اقرأ أكثر',
         lessLink: 'أقرأ أقل',
       }
     },

     init() {
        // console.log('read_more_text',window.read_more_text);
       s = this.settings();
       this.bindEvents();
     },

     bindEvents() {
       ReadMore.truncateText();
     },

     /**
      * Count Words
      * Helper to handle word count.
      * @param {string} str - Target content string.
      */
     countWords(str) {
       return str.split(/\s+/).length;
     },

     /**
      * Ellpise Content
      * @param {string} str - content string.
      * @param {number} wordsNum - Number of words to show before truncation.
      */
     ellipseContent(str, wordsNum) {
       return str.split(/\s+/).slice(0, wordsNum).join(' ') + '...';
     },

     /**
      * Truncate Text
      * Truncate and ellipses contented content
      * based on specified word count.
      * Calls createLink() and handleClick() methods.
      */
     truncateText() {

       for (let i = 0; i < s.content.length; i++) {
         //console.log(s.content)
         var description_id = $(s.content[i]).parent().parent().attr('id');
         var post_id = description_id.split('-')[2];
            // console.log("#read-more_"+post_id,$("#read-more_"+post_id).length);
            // if($("#read-more_"+post_id).length > 0){
            //     console.log('in condition:',"#read-more_"+post_id,$("#read-more_"+post_id).length);
            //     console.log('div',$($("#post-"+post_id)[0]).length);
            //     console.log($("#post-"+post_id).remove());
            //     //$($("#post-"+post_id)[0]).parent().remove();
            // }
         const originalContent = s.content[i].innerHTML;
         const numberOfWords = s.content[i].dataset.rmWords;
         const truncateContent = ReadMore.ellipseContent(originalContent, numberOfWords);
         const originalContentWords = ReadMore.countWords(originalContent);
         $(s.content[i]).attr('id','readMore_'+post_id);
         var length_of_element = 0;
         readMoreBtn = document.getElementById('read-more_'+post_id);
        //  console.log('readMorebyttn',readMoreBtn);
         if(readMoreBtn){
             length_of_element = readMoreBtn.length; 
         }
         originalContentArr[post_id] = (originalContent);
         truncatedContentArr[post_id] = (truncateContent);

         if(length_of_element == 0){
        
        //  len = originalContent.split(/\r\n|\r|\n/).length
        //     console.log('line count ',len);
          if (numberOfWords <= originalContentWords) {
                 s.content[i].innerHTML = truncatedContentArr[post_id];
                 let self = i;
                 ReadMore.createLink(self,post_id,originalContent,truncateContent)
                 s.post_ids.push(post_id)
           }
         }
       }
    //   ReadMore.removeEventListener(s.content);
       ReadMore.handleClick(s.content);
     },

     /**
      * Create Link
      * Creates and Inserts Read More Link
      * @param {number} index - index reference of looped item
      */
     createLink(index,post_id,originalContent,truncatedContent) {
       const linkWrap = document.createElement('span');

       document.getElementById("read-more_"+post_id);    
       linkWrap.className = 'read-more__link-wrap';
       linkWrap.innerHTML = `<a id="read-more_${post_id}" data-id="${index}" class="read-more__link mr-2 ml-2" style="cursor:pointer;">${s.moreLink}</a>`;

       const linkWrapOrginal = document.createElement('input');
       linkWrapOrginal.id = 'orginalContent_'+post_id;
       linkWrapOrginal.value = originalContent;
       linkWrapOrginal.type = 'hidden';

       const linkWrapTruncated = document.createElement('input');
       linkWrapTruncated.id = 'truncatedContent_'+post_id;
       linkWrapTruncated.value = truncatedContent;
       linkWrapTruncated.type = 'hidden';

       // Inset created link
       s.content[index].parentNode.insertBefore(linkWrap, s.content[index].nextSibling);
       s.content[index].parentNode.insertBefore(linkWrapOrginal, s.content[index].nextSibling);
       s.content[index].parentNode.insertBefore(linkWrapTruncated, s.content[index].nextSibling);

     },

     /**
      * Handle Click
      * Toggle Click eve
      */
     handleClick(el) {
    //   const readMoreLink = document.querySelectorAll('.read-more__link');
        //  console.log('Handle click post ids',s.post_ids)
    //   for (let j = 0, l = readMoreLink.length; j < l; j++) {

       for (let j = 0, l = s.post_ids.length; j < l; j++) {
          var post_id2 = s.post_ids[j];
          let obj = null
          let parentObj = document.getElementById('readMore_'+post_id2);
          obj =  document.getElementById('read-more_'+post_id2);
          let original =  document.getElementById('orginalContent_'+post_id2);
          let truncated =  document.getElementById('truncatedContent_'+post_id2);
        // readMoreLink[j].addEventListener('click', function() {
           obj.addEventListener('click', function() { 
        //   const moreLinkID = this.getAttribute('id');
        //   let index = moreLinkID.split('_')[1];
          let index = this.getAttribute('data-id');

        //   el[index].classList.toggle('is-expanded');
          parentObj.classList.toggle('is-expanded');

           if (this.dataset.clicked !== 'true') {
            //   el[index].innerHTML = original.value;
              parentObj.innerHTML = original.value;
            //   console.log('show original');
            //   console.log(parentObj);
            //   console.log(parentObj.innerHTML);
              this.innerHTML = s.lessLink;
              this.dataset.clicked = true;
           } else {
            //  el[index].innerHTML = truncated.value;
              parentObj.innerHTML = truncated.value;
            //   console.log('show truncated');
            //   console.log(parentObj);
            //   console.log(parentObj.innerHTML);
             this.innerHTML = s.moreLink;
             this.dataset.clicked = false;
           }
         });
       }
     },
    

     /**
      * Open All
      * Method to expand all instances on the page.
      */
     openAll() {
       const instances = document.querySelectorAll('.read-more__link');
         for (let i = 0; i < instances.length; i++) {
           content[i].innerHTML = truncatedContentArr[i];
           instances[i].innerHTML = s.moreLink;
         }
       }
     }
 })();

ReadMore.init()
// console.log('read more main int');