Efl Learner Profile About Me

import {
  updatePlayerProfile,
  updateProfileCompletion,
} from '../efl-learner-profile/efl-learner-profile-update';

export default parentElement => {
  // Read-Only Section
  const readOnlyParagraph = parentElement.querySelector('.read-only-section');
  // const eflProfileLayout = document.querySelector('.efl-profile-layout');
  const editbtn = parentElement.querySelector(
    '.efl-learner-profile__section--edit'
  );

  // Pop-up Section
  const popUp = parentElement.querySelector('.efl-profile-left-popup');
  const clearTextButton = popUp.querySelector('.clear-text');
  const characterCount = popUp.querySelector('.character-count');
  const textArea = popUp.querySelector('textarea');
  const saveButton = popUp.querySelector('.cta[id=about-me-save-button]');
  const closeButton = popUp.querySelector('.efl-profile-left-popup__close');
  const toastNotification = popUp.querySelector(
    '.efl-profile-left-popup__toast-notification'
  );

  // Alert Modal
  const alertModal = popUp.querySelector(
    '.efl-profile-left-popup__alert-modal'
  );
  const privacyInput = document.querySelector('#learner-profile-privacy-check');

  // Alert Modal - Buttons
  const continueEditingBtn = alertModal.querySelector(
    '#about-me-continue-editing-button'
  );
  const loseChangesBtn = alertModal.querySelector(
    '#about-me-lose-my-changes-button'
  );
  const makeBioPublicBtn = alertModal.querySelector(
    '#about-me-make-bio-public-button'
  );
  const keepBioPrivateBtn = alertModal.querySelector(
    '#about-me-keep-bio-private-button'
  );
  const editAboutMeBtn = alertModal.querySelector(
    '#efl-learner-profile-edit-about-me-button'
  );
  const errorAboutMeBtn = alertModal.querySelector(
    '#efl-learner-profile-error-about-me-button'
  );
  const MOBILE_BREAKPOINT = 820;

  saveButton.setAttribute('aria-disabled', 'true');
  characterCount.innerHTML = textArea.value.length;

  // Functions

  const modalAlert = type => {
    const header = alertModal.getAttribute(`data-${type}-header`);
    const copy = alertModal.getAttribute(`data-${type}-copy`);

    // Reset Alert Modal ClassName
    alertModal.removeAttribute('data-err');
    alertModal.setAttribute('data-err', type);

    alertModal.querySelector('h5').innerHTML = header;
    alertModal.querySelector('p').innerHTML = copy;

    alertModal.classList.add('add-animation');
    popUp.classList.add('dark-overlay');
  };

  const makeBioPublic = status => {
    privacyInput.checked = status;
  };

  const closeModal = e => {
    e.preventDefault();

    alertModal.classList.remove('add-animation');

    setTimeout(() => {
      popUp.classList.remove('dark-overlay');
    }, 300);
  };

  // Event Listeners

  clearTextButton.addEventListener('click', e => {
    e.preventDefault();

    textArea.value = '';
    characterCount.innerHTML = '0';
    saveButton.setAttribute('aria-disabled', 'true');
  });

  textArea.addEventListener('keydown', e => {
    characterCount.innerHTML = e.target.value.length;

    // Disable button on empty text
    if (e.target.value.length > 0) {
      saveButton.setAttribute('aria-disabled', 'false');
      closeButton.classList.add('not-saved');
    } else {
      saveButton.setAttribute('aria-disabled', 'true');
      closeButton.classList.remove('not-saved');
    }
  });

  saveButton.addEventListener('click', e => {
    e.preventDefault();

    if (saveButton.getAttribute('aria-disabled') === 'true') {
      if (textArea.value === '') {
        modalAlert('fill-all-fields');
        setTimeout(() => {
          continueEditingBtn.focus();
        }, 100);
      }
      return;
    }

    if (saveButton.getAttribute('aria-disabled') === 'false') {
      saveButton.classList.add('loading-bar');
      saveButton.setAttribute('aria-disabled', 'true');
      updatePlayerProfile().then(abusiveContent => {
        if (
          abusiveContent &&
          abusiveContent.FAIWFResponse &&
          abusiveContent.FAIWFResponse.IsAbusive
        ) {
          modalAlert('innapropriate-content');
          saveButton.classList.remove('loading-bar');
          saveButton.setAttribute('aria-disabled', 'false');
        } else if (
          abusiveContent &&
          !abusiveContent.FAIWFResponse &&
          abusiveContent.Error
        ) {
          modalAlert('iwf-error-content');
          saveButton.classList.remove('loading-bar');
          saveButton.setAttribute('aria-disabled', 'false');
        } else {
          if (
            !privacyInput.checked &&
            popUp.getAttribute('data-initial-filled') !== 'true'
          ) {
            popUp.setAttribute('data-initial-filled', 'true');
            modalAlert('make-bio-public');
            setTimeout(() => {
              makeBioPublicBtn.focus();
            }, 100);
            saveButton.classList.remove('loading-bar');
            saveButton.setAttribute('aria-disabled', 'false');
            return;
          }

          saveButton.classList.remove('loading-bar');

          readOnlyParagraph.innerHTML = textArea.value;

          // profile completion notification
          updateProfileCompletion(2);

          saveButton.setAttribute('aria-disabled', 'true');

          // Allow User to exit form once saved
          closeButton.classList.remove('not-saved');

          if (window.innerWidth >= MOBILE_BREAKPOINT) {
            toastNotification.style.left = `${(431 -
              toastNotification.offsetWidth) /
              2}px`;
          }
          toastNotification.classList.add('enter-animation');
          setTimeout(() => {
            toastNotification.classList.remove('enter-animation');
          }, 3000);
        }
      });
    }
  });

  saveButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      saveButton.click();
    } else {
      setTimeout(() => {
        closeButton.focus();
      }, 10);
    }
  });

  closeButton.addEventListener('click', e => {
    if (saveButton.getAttribute('aria-disabled') === 'false') {
      e.preventDefault();
      modalAlert('unsaved-changes');
      saveButton.classList.remove('loading-bar');
      setTimeout(() => {
        continueEditingBtn.focus();
      }, 50);
    } else {
      setTimeout(() => {
        editbtn.focus();
      }, 50);
    }
  });

  if (closeButton) {
    closeButton.addEventListener('keydown', event => {
      if (event.keyCode === 13) {
        event.preventDefault();
        closeButton.click();
      } else if (event.shiftKey && event.keyCode === 9) {
        event.preventDefault();
      }
    });
  }

  // Alert Modal

  continueEditingBtn.addEventListener('click', event => {
    closeModal(event);

    setTimeout(() => {
      closeButton.focus();
    }, 10);
  });

  continueEditingBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      continueEditingBtn.click();
    } else {
      setTimeout(() => {
        loseChangesBtn.focus();
      }, 10);
    }
  });

  loseChangesBtn.addEventListener('click', event => {
    console.log(textArea.value);
    if (textArea.value === '') {
      textArea.value = '';
    } else {
      textArea.value = readOnlyParagraph.innerHTML;
    }
    characterCount.innerHTML = '0';
    saveButton.setAttribute('aria-disabled', 'true');
    closeButton.classList.remove('not-saved');
    saveButton.classList.remove('loading-bar');
    closeModal(event);

    setTimeout(() => {
      closeButton.focus();
    }, 10);
  });

  loseChangesBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      loseChangesBtn.click();
    } else {
      setTimeout(() => {
        continueEditingBtn.focus();
      }, 10);
    }
  });

  makeBioPublicBtn.addEventListener('click', event => {
    closeModal(event);
    makeBioPublic(true);
    setTimeout(() => {
      saveButton.focus();
    }, 10);
  });

  makeBioPublicBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      makeBioPublicBtn.click();
    } else {
      setTimeout(() => {
        keepBioPrivateBtn.focus();
      }, 10);
    }
  });

  keepBioPrivateBtn.addEventListener('click', event => {
    closeModal(event);
    makeBioPublic(false);
    setTimeout(() => {
      saveButton.focus();
    }, 10);
  });

  keepBioPrivateBtn.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      keepBioPrivateBtn.click();
    } else {
      setTimeout(() => {
        makeBioPublicBtn.focus();
      }, 10);
    }
  });

  editAboutMeBtn.addEventListener('click', event => {
    closeModal(event);
  });
  errorAboutMeBtn.addEventListener('click', event => {
    closeModal(event);
  });
};