Efl Comments

export default parentElement => {
  const commetBox = parentElement.querySelector('.efl-comments__add-comment');
  const commentReply = parentElement.querySelectorAll(
    '.efl-comments-item__message--reply'
  );
  const commentLike = parentElement.querySelectorAll(
    '.efl-comments-item__message--like'
  );
  const sendComment = parentElement.querySelectorAll('.efl-comments-send');

  const timeSince = () => {
    const timeSpan = parentElement.querySelectorAll(
      '.efl-comments-item__user-detail--name > span'
    );

    timeSpan.forEach(dateVal => {
      const { postedTime } = dateVal.dataset;
      const seconds = Math.floor((new Date() - new Date(postedTime)) / 1000);
      let intervalType;
      let interval = Math.floor(seconds / 31536000);

      if (interval >= 1) {
        intervalType = 'year';
      } else {
        interval = Math.floor(seconds / 2592000);
        if (interval >= 1) {
          intervalType = 'month';
        } else {
          interval = Math.floor(seconds / 86400);
          if (interval >= 1) {
            intervalType = 'day';
          } else {
            interval = Math.floor(seconds / 3600);
            if (interval >= 1) {
              intervalType = 'hour';
            } else {
              interval = Math.floor(seconds / 60);
              if (interval >= 1) {
                intervalType = 'minute';
              } else {
                interval = seconds;
                intervalType = 'second';
              }
            }
          }
        }
      }

      if (interval > 1 || interval === 0) {
        intervalType += 's';
      }
      if (intervalType === 'seconds') {
        interval = 'few';
      }

      // eslint-disable-next-line no-param-reassign
      dateVal.innerHTML = `Posted ${interval} ${intervalType} ago`;
    });
  };

  const showMoreLinkEvent = link => {
    link.addEventListener('click', event => {
      const { hideText, showmoreText } = event.target.dataset;
      const replyEle = event.target
        .closest('.efl-comments-item-group')
        .querySelector('.efl-comments-item-group__reply');

      if (replyEle.classList.contains('hidden')) {
        replyEle.classList.remove('hidden');
        // eslint-disable-next-line no-param-reassign
        link.innerHTML = hideText;
      } else {
        replyEle.classList.add('hidden');
        // eslint-disable-next-line no-param-reassign
        link.innerHTML = showmoreText;
      }
    });
  };

  const updateShowMoreText = (element, expand) => {
    const totalItem = element.querySelectorAll(
      '.efl-comments-item-group__reply > *'
    ).length;
    const replyEle = element.querySelector('.efl-comments-item-group__reply');
    const showmore = element.querySelector(
      '.efl-comments-item-group__showmore'
    );

    const showmoreText =
      totalItem > 1 // eslint-disable-line operator-linebreak
        ? `Show ${totalItem} more replies` // eslint-disable-line operator-linebreak
        : `Show ${totalItem} more reply`; // eslint-disable-line operator-linebreak

    const hideText =
      totalItem > 1 // eslint-disable-line operator-linebreak
        ? `Hide replies` // eslint-disable-line operator-linebreak
        : `Hide reply`; // eslint-disable-line operator-linebreak

    showmore.setAttribute('data-showmore-text', showmoreText);
    showmore.setAttribute('data-hide-text', hideText);

    if (expand === 'expanded') {
      replyEle.classList.remove('hidden');
      showmore.innerHTML = hideText;
    } else {
      replyEle.classList.add('hidden');
      showmore.innerHTML = showmoreText;
    }

    if (totalItem) {
      showmore.classList.remove('hidden');
    } else {
      showmore.classList.add('hidden');
    }
  };

  const setShowMoreLinkActive = () => {
    const commentGroups = parentElement.querySelectorAll(
      '.efl-comments-item-group'
    );

    commentGroups.forEach(group => {
      const showmore = group.querySelector(
        '.efl-comments-item-group__showmore'
      );

      updateShowMoreText(group, 'collapsed');
      showMoreLinkEvent(showmore);
    });
  };

  const commentBoxEvent = e => {
    const entryBlock = e.target.closest('.efl-comments__entry');
    const countText = entryBlock.querySelector('.character-count');
    const addComment = entryBlock.querySelector('.efl-comments-send');

    countText.innerHTML = e.target.value.length;

    // Disable button on empty text
    if (e.target.value.length > 0) {
      addComment.setAttribute('aria-disabled', 'false');
    } else {
      addComment.setAttribute('aria-disabled', 'true');
    }
  };

  const formatCommentData = (event, commentType) => {
    const commentElement = event.target.closest('.efl-comments__entry');
    const commentText = commentElement.querySelector(
      '.efl-comments__add-comment'
    ).value;
    const commentDetails = {
      profileImg: '/assets/example-content/user-comment-6.png',
      name: 'Edwin Jebaraj',
      time: new Date(),
      message: commentText,
      likeCount: '',
      type: commentType,
    };

    return commentDetails;
  };

  const resetCommentBox = event => {
    const commentElement = event.target.closest('.efl-comments__entry');
    const commentGroup = event.target.closest(
      '.efl-comments-item__reply-comment'
    );

    commentElement.querySelector('.efl-comments__add-comment').value = '';
    commentElement.querySelector('.character-count').innerHTML = '0';
    if (commentGroup) {
      commentGroup.classList.add('hidden');
    }
    if (event.target.classList.contains('efl-comments-send')) {
      event.target.setAttribute('aria-disabled', 'true');
    } else {
      event.target
        .closest('.efl-comments-send')
        .setAttribute('aria-disabled', 'true');
    }
  };

  const updateLikeCount = event => {
    const likeLink = event.target;
    let linkCount = likeLink.innerHTML ? parseInt(likeLink.innerHTML, 10) : 0;

    if (!likeLink.classList.contains('active')) {
      linkCount += 1;
      likeLink.innerHTML = linkCount;
      likeLink.classList.add('active');
    }
  };

  const formatCommentReply = (commentDetails, event) => {
    const { name, profileImg, time, message, likeCount, type } = commentDetails;
    let replyHtml = '';
    let replyCommentHtml = '';
    let replyGroupEle = '';
    let loadMoreReply = '';

    if (type === 'comment') {
      replyHtml = '<a class="efl-comments-item__message--reply">Reply</a>';
      replyCommentHtml =
        '<div class="efl-comments-item__reply-comment hidden"></div>';
      replyGroupEle = '<div class="efl-comments-item-group__reply"></div>';
      loadMoreReply =
        '<a class="efl-comments-item-group__showmore hidden"></a>';
    }
    const commentList = parentElement.querySelector('.efl-comments__list');

    const commentHtml = `
      <div class="efl-comments-item">
        <div class="efl-comments-item__user-detail">
            <img alt="${name}" src="${profileImg}" loading="lazy">
            <div class="efl-comments-item__user-detail--name">
                <p>${name}</p>
                <span data-posted-time="${time}">Posted few seconds ago</span>
            </div>
        </div>
        <div class="efl-comments-item__message">
          ${message} 
        </div>
        <div class="efl-comments-item__like-reply">
            <a class="efl-comments-item__message--like">${likeCount}</a>
            ${replyHtml}
        </div>
        ${replyCommentHtml}
      </div>
    `;

    if (type === 'comment') {
      const commentGroup = `
        <div class="efl-comments-item-group">
          ${commentHtml}
          ${replyGroupEle}
          ${loadMoreReply}
        </div>
      `;

      commentList.insertAdjacentHTML('afterbegin', commentGroup);

      // like cta event
      const likeCtas = commentList.querySelectorAll(
        '.efl-comments-item__message--like'
      );
      // reply cta event
      const replyComments = commentList.querySelectorAll(
        '.efl-comments-item__message--reply'
      );
      const showmore = commentList.querySelector(
        '.efl-comments-item-group__showmore'
      );

      likeCtas.forEach(likeLink => {
        likeLink.addEventListener('click', e => {
          updateLikeCount(e);
        });
      });

      replyComments.forEach(replyLink => {
        replyLink.addEventListener('click', e => {
          // eslint-disable-next-line no-use-before-define
          insertReplyBox(e);
        });
      });

      showMoreLinkEvent(showmore);
    } else {
      const replyGroup = event.target.closest('.efl-comments-item-group');
      const replyList = replyGroup.querySelector(
        '.efl-comments-item-group__reply'
      );

      replyList.insertAdjacentHTML('afterbegin', commentHtml);

      // like cta event
      const likeCtas = replyList.querySelectorAll(
        '.efl-comments-item__message--like'
      );

      likeCtas.forEach(likeLink => {
        likeLink.addEventListener('click', e => {
          updateLikeCount(e);
        });
      });

      const expand = replyList.classList.contains('hidden')
        ? 'collapsed' // eslint-disable-line operator-linebreak
        : 'expanded'; // eslint-disable-line operator-linebreak

      updateShowMoreText(replyGroup, expand);
    }
  };

  const insertReplyBox = event => {
    const replyElement = event.target;
    const replyComment = replyElement.closest('.efl-comments-item');
    const replyAllBox = parentElement.querySelectorAll(
      '.efl-comments-item__reply-comment'
    );
    const replyBox = replyComment.querySelector(
      '.efl-comments-item__reply-comment'
    );

    replyAllBox.forEach(box => {
      box.classList.add('hidden');
    });

    const replyHtml = `
      <div class="efl-comments__title">Add a reply</div>
      <div class="efl-comments__entry">
      <textarea class="efl-comments__add-comment" maxlength="1000"></textarea>
      <div class="efl-comments__reply-comment--cta">
          <p>Charcter count (<span class="character-count">0</span>/1000)</p>
          <a class="cta cta--efl efl-comments-send" tabindex="0" aria-disabled="true">
            <span>Send</span>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="20px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
              <rect x="0" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate>
              </rect>
              <rect x="8" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate>
              </rect>
              <rect x="16" y="10" width="4" height="10" fill="#fff" opacity="0.2">
                <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
                <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate>
              </rect>
            </svg>
          </a>
      </div>
    </div>`;

    replyBox.innerHTML = replyHtml;
    replyBox.classList.remove('hidden');

    // add keyup event
    const replyInput = replyBox.querySelector('.efl-comments__add-comment');
    const replySend = replyBox.querySelector('.efl-comments-send');

    replyInput.addEventListener('keyup', e => {
      commentBoxEvent(e);
    });

    replySend.addEventListener('click', e => {
      e.preventDefault();
      if (e.target.getAttribute('aria-disabled') === 'true') {
        return;
      }
      const commentDetails = formatCommentData(e, 'reply');

      formatCommentReply(commentDetails, e);
      resetCommentBox(e);
      timeSince();
    });
  };

  commetBox.addEventListener('keyup', e => {
    commentBoxEvent(e);
  });

  commentReply.forEach(replyLink => {
    replyLink.addEventListener('click', e => {
      insertReplyBox(e);
    });
  });

  commentLike.forEach(likeLink => {
    likeLink.addEventListener('click', e => {
      updateLikeCount(e);
    });
  });

  sendComment.forEach(cta => {
    cta.addEventListener('click', e => {
      e.preventDefault();
      if (e.target.getAttribute('aria-disabled') === 'true') {
        return;
      }
      const commentDetails = formatCommentData(e, 'comment');

      formatCommentReply(commentDetails, e);
      resetCommentBox(e);
      timeSince();
    });
  });

  // set showmore replies link
  setShowMoreLinkActive();

  // To set the posted {time} ago text
  timeSince();
  setInterval(() => {
    timeSince();
  }, 65000);
};