Efl Learner Profile My Qualifications

import Datepicker from 'vanillajs-datepicker/js/Datepicker';
import { updatePlayerProfile } from '../efl-learner-profile/efl-learner-profile-update';

export default parentElement => {
  // Variables
  const eflProfileLayout = document.querySelector('.efl-profile-layout');
  const eflQualifications = parentElement.querySelector(
    '.efl-learner-profile__section__qualification--container:not(.other)'
  );
  const otherQualificationsPage = parentElement.querySelector(
    '#efl-learner-profile-other-qualification-page-list'
  );
  const otherQualificationsPopup = parentElement.querySelector(
    '#efl-learner-profile-other-qualification-popup-list'
  );
  const editbtn = parentElement.querySelector(
    '.efl-learner-profile__section--edit'
  );

  // Pop Up
  const popUp = parentElement.querySelector('.efl-profile-left-popup');
  const eflQualificationsPopup = popUp.querySelector(
    '.efl-learner-profile__section__qualification--container:not(.other)'
  );
  const addQualificationButton = popUp.querySelector(
    '.cta[id=add-qualification-button]'
  );
  const backButton = popUp.querySelector('.efl-profile-left-popup__back');

  const mainSection = popUp.querySelector('#my-qualifications-editable');
  const formSection = popUp.querySelector('#my-qualifications-form');
  const { formTitleAdd, formTitleEdit } = formSection.querySelector(
    'h4'
  ).dataset;
  // Qualification Form
  const saveQualificationButton = popUp.querySelector(
    '.cta[id=my-qualifications-save-form-button]'
  );
  const deleteQualificationBtn = popUp.querySelector(
    '.cta[id=delete-qualification-button]'
  );

  const toastNotification = popUp.querySelector(
    '.efl-profile-left-popup__toast-notification'
  );
  const closeBtn = popUp.querySelector('.efl-profile-left-popup__close');
  const { toastUpdateText, toastDeleteText } = toastNotification.dataset;
  const MOBILE_BREAKPOINT = 820;

  // 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(
    '#my-qualifications-continue-editing-button'
  );
  const loseChangesBtn = alertModal.querySelector(
    '#my-qualifications-lose-my-changes-button'
  );
  const makeBioPublicBtn = alertModal.querySelector(
    '#my-qualifications-make-bio-public-button'
  );
  const keepBioPrivateBtn = alertModal.querySelector(
    '#my-qualifications-keep-bio-private-button'
  );
  const editQualificationBtn = alertModal.querySelector(
    '#efl-learner-profile-edit-qualification-button'
  );
  const errorQualificationBtn = alertModal.querySelector(
    '#efl-learner-profile-error-qualification-button'
  );

  // Inputs
  const nameInput = formSection.querySelector('#my-qualifications-form--name');
  const dateInput = formSection.querySelector('#my-qualifications-form--date');
  const textareaInput = formSection.querySelector(
    '#my-qualifications-form--desc'
  );

  const characterCount = popUp.querySelector('.character-count__name');
  const textareaCharacterCount = popUp.querySelector(
    '.character-count__textarea'
  );

  // eslint-disable-next-line no-unused-vars
  let datePicker = null;

  // Functions

  const resetForm = () => {
    nameInput.value = '';
    dateInput.value = '';
    textareaInput.value = '';

    saveQualificationButton.setAttribute('aria-disabled', 'true');
    characterCount.innerHTML = '0';
    textareaCharacterCount.innerHTML = '0';
  };

  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 closeModal = e => {
    e.preventDefault();

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

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

  const closeForm = () => {
    backButton.setAttribute('aria-disabled', 'false');
    formSection.setAttribute('data-unsaved', 'false');
    mainSection.classList.remove('hidden');
    formSection.classList.add('hidden');
    closeBtn.classList.remove('not-saved');
  };

  const openForm = () => {
    mainSection.classList.add('hidden');
    formSection.classList.remove('hidden');
    formSection.scroll(0, 0);
  };

  // eslint-disable-next-line no-unused-vars
  const closePopUp = () => {
    // Reset UI back to default
    closeForm();
    popUp.classList.remove('add-animation');
    popUp.classList.remove('dark-overlay');

    eflProfileLayout.style.zIndex = null;

    document.body.classList.remove('efl-profile-dark-overlay');
  };

  const formValidation = () => {
    if (
      nameInput.value === '' ||
      dateInput.value === '' ||
      textareaInput.value === ''
    ) {
      saveQualificationButton.setAttribute('aria-disabled', 'true');
      backButton.setAttribute('aria-disabled', 'true');
    } else {
      saveQualificationButton.setAttribute('aria-disabled', 'false');
      formSection.setAttribute('data-unsaved', 'true');
      closeBtn.classList.add('not-saved');
    }

    if (
      nameInput.value === '' &&
      dateInput.value === '' &&
      textareaInput.value === ''
    ) {
      formSection.setAttribute('data-unsaved', 'false');
      closeBtn.classList.remove('not-saved');
    } else {
      formSection.setAttribute('data-unsaved', 'true');
      closeBtn.classList.add('not-saved');
    }
  };

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

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

    const qualification = e.target.closest(
      '.efl-learner-profile__section__qualification'
    );
    const qualificationName = qualification.querySelector('h5').innerHTML;
    const qualificationDescription = qualification.querySelector('p').innerHTML;
    const { editId, endDate } = qualification.dataset;

    // Need to remove z-index for popup to work
    eflProfileLayout.style.zIndex = 'unset';
    document.body.classList.add('efl-profile-dark-overlay');

    openForm();

    formSection.setAttribute('data-editing', editId);
    saveQualificationButton.setAttribute('aria-disabled', 'true');

    // fill inputs with default values
    nameInput.value = qualificationName;
    textareaInput.value = qualificationDescription;
    dateInput.value = endDate;
    datePicker.setDate(new Date(endDate));

    characterCount.innerHTML = qualificationName.length;
    textareaCharacterCount.innerHTML = qualificationDescription.length;

    popUp.classList.add('add-animation');

    deleteQualificationBtn.classList.remove('hidden');
    formSection.querySelector('h4 strong').innerText = formTitleEdit;
  };

  const editQualificationInit = () => {
    const editQualificationLinks = mainSection.querySelectorAll(
      '.efl-learner-profile__section__qualification--edit'
    );

    editQualificationLinks.forEach(editlink => {
      editlink.addEventListener('click', e => {
        e.preventDefault();

        editQualification(e);
        setTimeout(() => {
          closeBtn.focus();
        }, 50);
      });

      editlink.addEventListener('keydown', event => {
        if (event.keyCode === 13) {
          event.preventDefault();
          editlink.click();
        }
      });
    });
  };

  const showMoreQualifications = (container, threshold) => {
    if (!container) {
      return;
    }
    const showMoreButton = container.querySelector('#show-more-button');

    if (!showMoreButton) {
      return;
    }

    const showLessButton = container.querySelector('#show-less-button');
    const qualifications = container.querySelectorAll(
      '.efl-learner-profile__section__qualification'
    );

    // Hide Default Text when there is no my qualifications
    const myqualifications = container.querySelectorAll(
      '.efl-learner-profile__section__qualification.myqualification'
    );
    const myplaceholderText = container.parentElement.querySelectorAll(
      '.my-placeholder-text'
    );

    if (myqualifications.length > 1) {
      myplaceholderText.forEach(myplaceholders => {
        myplaceholders.classList.add('hidden');
      });
    }

    // Hide Default Text when there is no other qualifications
    const otherqualifications = container.querySelectorAll(
      '.efl-learner-profile__section__qualification.other'
    );
    const otherplaceholderText = container.parentElement.querySelectorAll(
      '.other-placeholder-text'
    );

    if (otherqualifications.length > 0) {
      otherplaceholderText.forEach(otherplaceholders => {
        otherplaceholders.classList.add('hidden');
      });
    }

    if (showLessButton) {
      showLessButton.classList.add('hidden');
    }

    if (qualifications.length > threshold) {
      qualifications.forEach((qualificiation, index) => {
        if (index + 1 > threshold) {
          qualificiation.classList.add('hidden');
        } else {
          qualificiation.classList.remove('hidden');
        }
      });

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

        showMoreButton.classList.add('hidden');
        showLessButton.classList.remove('hidden');
        setTimeout(() => {
          showLessButton.focus();
        }, 10);
        qualifications.forEach(qualificiation => {
          qualificiation.classList.remove('hidden');
        });
      });

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

        const clickedElement = e.target;
        const eflQualification = clickedElement.closest(
          '.efl-learner-profile__section__qualification--container:not(.other)'
        );
        const otherQualificationPage = clickedElement.closest(
          '#efl-learner-profile-other-qualification-page-list'
        );
        const otherQualificationPopup = clickedElement.closest(
          '#efl-learner-profile-other-qualification-popup-list'
        );

        if (eflQualification) {
          showMoreQualifications(eflQualification, 3);
          showMoreButton.classList.remove('hidden');
          setTimeout(() => {
            showMoreButton.focus();
          }, 10);
          showLessButton.classList.add('hidden');
        } else if (otherQualificationPage) {
          showMoreQualifications(otherQualificationPage, 2);
          showMoreButton.classList.remove('hidden');
          setTimeout(() => {
            showMoreButton.focus();
          }, 10);
          showLessButton.classList.add('hidden');
        } else if (otherQualificationPopup) {
          showMoreQualifications(otherQualificationPopup, 2);
          showMoreButton.classList.remove('hidden');
          setTimeout(() => {
            showMoreButton.focus();
          }, 10);
          showLessButton.classList.add('hidden');
        }
      });
    } else {
      showMoreButton.classList.add('hidden');
      showLessButton.classList.add('hidden');
    }
  };

  const dateSorting = (a, b) => {
    if (
      new Date(a.dateCompleted).getTime() > new Date(b.dateCompleted).getTime()
    ) {
      return -1;
    }
    return 1;
  };

  const updateQualificationDetails = editMode => {
    const monthNames = [
      'Jan',
      'Feb',
      'Mar',
      'Apr',
      'May',
      'Jun',
      'Jul',
      'Aug',
      'Sep',
      'Oct',
      'Nov',
      'Dec',
    ];

    const myQualificationsPage = document.querySelector(
      '[data-behavior="efl-learner-profile-my-qualifications"]'
    );
    const myQualificationsPopupDiv = myQualificationsPage.querySelector(
      '#efl-learner-profile-other-qualification-popup-list'
    );
    const myQualificationsPopupList = myQualificationsPopupDiv.querySelector(
      '.efl-learner-profile-other-qualification-popup-list--item'
    );
    const myQualificationsPageDiv = myQualificationsPage.querySelector(
      '#efl-learner-profile-other-qualification-page-list'
    );
    const myQualificationsPageList = myQualificationsPageDiv.querySelector(
      '.efl-learner-profile-other-qualification-page-list--item'
    );
    let qualificationList = myQualificationsPageDiv.querySelectorAll(
      '.efl-learner-profile__section__qualification.other'
    );
    let qualificationJson = [];
    let count = 0;

    const newQualificationJson = `{
      "name": "${nameInput.value}" , 
      "description" : "${textareaInput.value}", 
      "dateCompleted" : "${dateInput.value}"}`;

    if (editMode === 'new') {
      qualificationList.forEach((qualification, index) => {
        const { qualificationDetail } = qualification.dataset;

        qualificationJson[index] = JSON.parse(qualificationDetail);
        count = index;
      });

      qualificationJson[count + 1] = JSON.parse(newQualificationJson);
    } else if (editMode === 'edit') {
      const editId = formSection.getAttribute('data-editing');
      const editDateEnd = new Date(dateInput.value);
      const editEndMonth = editDateEnd.getMonth();
      const editEndYear = editDateEnd.getFullYear();

      const editPopupList = myQualificationsPopupDiv.querySelector(
        `.efl-learner-profile__section__qualification[data-edit-id="${editId}"]`
      );
      const editPageList = myQualificationsPageDiv.querySelector(
        `.efl-learner-profile__section__qualification[data-edit-id="${editId}"]`
      );

      editPopupList.querySelector('h5').innerText = nameInput.value;
      editPopupList.querySelector('p').innerHTML = textareaInput.value;
      editPopupList.querySelector('.efl-category-title').innerText = `${
        monthNames[editEndMonth]
      } ${editEndYear}`;

      editPageList.querySelector('h5').innerText = nameInput.value;
      editPageList.querySelector('p').innerHTML = textareaInput.value;
      editPageList.querySelector('.efl-category-title').innerText = `${
        monthNames[editEndMonth]
      } ${editEndYear}`;
      editPageList.setAttribute(
        'data-qualification-detail',
        newQualificationJson
      );

      qualificationList = myQualificationsPageDiv.querySelectorAll(
        '.efl-learner-profile__section__qualification.other'
      );

      qualificationJson = [];

      // console.log(qualificationList);

      qualificationList.forEach((qualification, index) => {
        const { qualificationDetail } = qualification.dataset;

        qualificationJson[index] = JSON.parse(qualificationDetail);
        // count = index;
      });
    } else if (editMode === 'delete') {
      const editId = formSection.getAttribute('data-editing');
      const deletePopupList = myQualificationsPopupDiv.querySelector(
        `.efl-learner-profile__section__qualification[data-edit-id="${editId}"]`
      );
      const deletePageList = myQualificationsPageDiv.querySelector(
        `.efl-learner-profile__section__qualification[data-edit-id="${editId}"]`
      );

      deletePopupList.remove();
      deletePageList.remove();

      qualificationList = myQualificationsPageDiv.querySelectorAll(
        '.efl-learner-profile__section__qualification.other'
      );

      qualificationJson = [];

      // console.log(qualificationList);

      qualificationList.forEach((qualification, index) => {
        const { qualificationDetail } = qualification.dataset;

        qualificationJson[index] = JSON.parse(qualificationDetail);
        // count = index;
      });

      const otherplaceholderText = parentElement.querySelectorAll(
        '.other-placeholder-text'
      );

      if (qualificationJson.length === 0) {
        otherplaceholderText.forEach(otherplaceholders => {
          otherplaceholders.classList.remove('hidden');
        });
      }
    }
    // console.log(qualificationJson);

    // sort the latest qualification to top list
    const sortedQualification = qualificationJson.sort(dateSorting);
    // console.log(sortedQualification);

    // empty popup other qualification list
    myQualificationsPopupList.innerHTML = '';
    // empty page other qualification list
    myQualificationsPageList.innerHTML = '';

    sortedQualification.forEach((qualification, index) => {
      const dateEnd = new Date(qualification.dateCompleted);
      const endMonth = dateEnd.getMonth();
      const endYear = dateEnd.getFullYear();

      const popupQualificationsHtml = `
      <div class="efl-learner-profile__section__qualification other" 
          data-end-date="${
            qualification.dateCompleted
          }" data-edit-id="${index}">
        <div class="efl-learner-profile__section__qualification__content">
          <div class="efl-category-title">${
            monthNames[endMonth]
          } ${endYear}</div>
          <h5>${qualification.name}</h5>
          <p>${qualification.description}</p>
        </div>
        <button aria-label="edit qualification" class="efl-learner-profile__section__qualification--edit"></button>
      </div>`;

      const pageQualificationHtml = `
        <div class="efl-learner-profile__section__qualification other"
          data-qualification-detail='{
            "name": "${qualification.name}" , 
            "description" : "${qualification.description}", 
            "dateCompleted" : "${
              qualification.dateCompleted
            }"}' data-edit-id="${index}">
          <div class="efl-learner-profile__section__qualification__content">
            <div class="efl-category-title">${
              monthNames[endMonth]
            } ${endYear}</div>
            <h5>${qualification.name}</h5>
            <p>${qualification.description}</p>
          </div>
        </div>`;

      // bind html object to popup other qualification list
      myQualificationsPopupList.insertAdjacentHTML(
        'beforeend',
        popupQualificationsHtml
      );
      // bind html object to page other qualification list
      myQualificationsPageList.insertAdjacentHTML(
        'beforeend',
        pageQualificationHtml
      );
    });

    // showMoreQualifications(eflExperiences, 2);
    showMoreQualifications(myQualificationsPopupDiv, 2);
    showMoreQualifications(myQualificationsPageDiv, 2);
    editQualificationInit();

    formSection.removeAttribute('data-editing');

    resetForm();
    closeForm();
  };

  const saveQualification = (editMode, saveButton) => {
    if (editMode === 'delete') {
      updateQualificationDetails(editMode);
    } else {
      saveButton.classList.add('loading-bar');
      saveButton.setAttribute('aria-disabled', 'true');
    }

    // eslint-disable-next-line complexity
    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 (abusiveContent && abusiveContent.Error === 'Future Date') {
        modalAlert('invalid-data-content');
        saveButton.classList.remove('loading-bar');
        saveButton.setAttribute('aria-disabled', 'false');
      } else {
        if (editMode !== 'delete') {
          if (
            privacyInput &&
            !privacyInput.checked &&
            formSection.getAttribute('data-initial-filled') !== 'true'
          ) {
            formSection.setAttribute('data-initial-filled', 'true');
            modalAlert('make-bio-public');
            setTimeout(() => {
              makeBioPublicBtn.focus();
            }, 100);
            saveButton.classList.remove('loading-bar');
            saveButton.setAttribute('aria-disabled', 'false');
            return;
          }
          updateQualificationDetails(editMode);
        }

        if (editMode === 'delete') {
          toastNotification.innerText = toastDeleteText;
        } else {
          toastNotification.innerText = toastUpdateText;
        }

        if (window.innerWidth >= MOBILE_BREAKPOINT) {
          toastNotification.style.left = `${(431 -
            toastNotification.offsetWidth) /
            2}px`;
        }

        saveButton.classList.remove('loading-bar');
        saveButton.setAttribute('aria-disabled', 'false');

        toastNotification.classList.add('enter-animation');
        setTimeout(() => {
          toastNotification.classList.remove('enter-animation');
        }, 3000);

        formSection.setAttribute('data-unsaved', 'false');

        mainSection.classList.remove('hidden');
        formSection.classList.add('hidden');

        backButton.setAttribute('aria-disabled', 'false');
        closeBtn.classList.remove('not-saved');
      }
    });
  };

  // Alert Modal

  continueEditingBtn.addEventListener('click', event => {
    closeModal(event);
    setTimeout(() => {
      saveQualificationButton.focus();
    }, 10);
  });

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

  loseChangesBtn.addEventListener('click', event => {
    closeModal(event);
    resetForm();
    closeForm();
    setTimeout(() => {
      closeBtn.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(() => {
      closeBtn.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(() => {
      closeBtn.focus();
    }, 10);
  });

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

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

    resetForm();

    openForm();
    formValidation();
    deleteQualificationBtn.classList.add('hidden');
    formSection.removeAttribute('data-editing');
    formSection.querySelector('h4 strong').innerText = formTitleAdd;
    datePicker = new Datepicker(dateInput, {
      maxDate: new Date(),
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 150)),
      prevArrow: '',
      nextArrow: '',
      container: '.my-qualifications-form--date-container',
      autohide: true,
    });
    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

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

  // Form

  nameInput.addEventListener('input', e => {
    characterCount.innerHTML = e.target.value.length;

    formValidation();
  });

  const today = new Date();

  datePicker = new Datepicker(dateInput, {
    maxDate: today,
    minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 150)),
    prevArrow: '',
    nextArrow: '',
    container: '.my-qualifications-form--date-container',
    autohide: true,
  });

  dateInput.addEventListener('change', () => {
    formValidation();
  });

  textareaInput.addEventListener('input', e => {
    textareaCharacterCount.innerHTML = e.target.value.length;
    formValidation();
  });

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

    if (formSection.getAttribute('data-unsaved') === 'true') {
      modalAlert('unsaved-changes');
      setTimeout(() => {
        continueEditingBtn.focus();
      }, 100);
      return;
    }

    if (!formSection.classList.contains('hidden')) {
      resetForm();
      closeForm();
    }

    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

  backButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      backButton.click();
    }
  });

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

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

    // Will edit current qualification instead of adding new in edit mode
    if (!formSection.getAttribute('data-editing')) {
      saveQualification('new', saveQualificationButton);
    } else {
      saveQualification('edit', saveQualificationButton);
    }
    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

  saveQualificationButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();
      saveQualificationButton.click();
    } else {
      // eslint-disable-next-line no-lonely-if
      if (deleteQualificationBtn.classList.contains('hidden')) {
        setTimeout(() => {
          closeBtn.focus();
        }, 10);
      }
    }
  });

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

    saveQualification('delete', deleteQualificationBtn);
    setTimeout(() => {
      closeBtn.focus();
    }, 10);
  });

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

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

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

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

      if (formSection.getAttribute('data-unsaved') === 'true') {
        modalAlert('unsaved-changes');
        setTimeout(() => {
          continueEditingBtn.focus();
        }, 100);
        return;
      }

      if (!formSection.classList.contains('hidden')) {
        resetForm();
        closeForm();
      }

      setTimeout(() => {
        editbtn.focus();
      }, 50);
    });

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

  showMoreQualifications(eflQualifications, 3);
  showMoreQualifications(eflQualificationsPopup, 3);
  showMoreQualifications(otherQualificationsPopup, 2);
  showMoreQualifications(otherQualificationsPage, 2);
  editQualificationInit();
};