Efl Learner Profile Previous Experience

// import { Rive, Layout } from '@rive-app/canvas';
import DateRangePicker from 'vanillajs-datepicker/js/DateRangePicker';
import {
  updatePlayerProfile,
  updateProfileCompletion,
} from '../efl-learner-profile/efl-learner-profile-update';

export default parentElement => {
  // Variables
  const eflProfileLayout = document.querySelector('.efl-profile-layout');
  const eflExperiences = parentElement.querySelector(
    '.efl-learner-profile__section__experience--container'
  );
  const placeholderText = parentElement.querySelector('.placeholder-text');
  const editbtn = parentElement.querySelector(
    '.efl-learner-profile__section--edit'
  );

  // Pop Up
  const popUp = parentElement.querySelector('.efl-profile-left-popup');
  const closeBtn = popUp.querySelector('.efl-profile-left-popup__close');
  const eflPopUpExperiences = popUp.querySelector(
    '.efl-learner-profile__section__experience--container'
  );
  const addExperienceBtn = popUp.querySelector(
    '.cta[id=previous-experience-add-button]'
  );
  const backButton = popUp.querySelector('.efl-profile-left-popup__back');

  const mainSection = popUp.querySelector('#previous-experience-main');
  const formSection = popUp.querySelector('#previous-experience-form');
  const { formTitleAdd, formTitleEdit } = formSection.querySelector(
    'h4'
  ).dataset;

  // Form
  const saveExperienceButton = popUp.querySelector(
    '.cta[id=previous-experience-save-experience-button]'
  );
  const deleteExperienceBtn = popUp.querySelector(
    '.cta[id=delete-experience-button]'
  );
  const titleInput = formSection.querySelector(
    '#previous-experience-form--title'
  );
  const roleInput = formSection.querySelector(
    '#previous-experience-form--role'
  );
  const dateRangeElement = formSection.querySelector(
    '.previous-experience-form--date-range'
  );
  const dateStartInput = formSection.querySelector(
    '#previous-experience-form--date-start'
  );
  const dateEndInput = formSection.querySelector(
    '#previous-experience-form--date-end'
  );
  const textareaInput = formSection.querySelector(
    '#previous-experience-form--desc'
  );
  const characterCount = popUp.querySelector('.character-count__name');
  const roleCharacterCount = popUp.querySelector('.character-count__role');
  const textareaCharacterCount = popUp.querySelector(
    '.character-count__textarea'
  );
  const toastNotification = popUp.querySelector(
    '.efl-profile-left-popup__toast-notification'
  );
  const { toastUpdateText, toastDeleteText } = toastNotification.dataset;
  const MOBILE_BREAKPOINT = 820;

  // const riveCanvas = toastNotification.querySelector('#rive');

  // const animation = new Rive({
  //   src: '/assets/example-content/tick_animation.riv',
  //   // Or the path to a local Rive asset
  //   // src: './example.riv',
  //   canvas: riveCanvas,
  //   layout: new Layout({ fit: 'fill' }),
  // });

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

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

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

  // Functions

  const showAll = (container, threshold) => {
    const showAllButton = container.querySelector('#show-all-button');
    const showLessButton = container.querySelector('#show-less-cta');
    const experiences = container.querySelectorAll(
      '.efl-learner-profile__section__experience'
    );

    if (experiences.length) {
      placeholderText.classList.add('hidden');
    }

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

    if (experiences.length > threshold) {
      experiences.forEach((experience, index) => {
        if (index + 1 > threshold) {
          experience.classList.add('hidden');
        }
      });
      showAllButton.innerHTML = `Show All ${experiences.length} Experiences`;

      showAllButton.classList.remove('hidden');

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

        showAllButton.classList.add('hidden');
        showLessButton.classList.remove('hidden');
        setTimeout(() => {
          showLessButton.focus();
        }, 10);
        experiences.forEach(experience => {
          experience.classList.remove('hidden');
        });
      });

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

        const clickedElement = e.target;
        const eflExperience = clickedElement.closest(
          '.efl-learner-profile__section__experience--container'
        );
        const eflPopUpExperience = clickedElement.closest(
          '.efl-learner-profile__section__experience--container'
        );

        if (eflExperience) {
          showAll(eflExperience, 2);
          showAllButton.classList.remove('hidden');
          setTimeout(() => {
            showAllButton.focus();
          }, 10);
          showLessButton.classList.add('hidden');
        } else if (eflPopUpExperience) {
          showAll(eflPopUpExperience, 3);
          showAllButton.classList.remove('hidden');
          setTimeout(() => {
            showAllButton.focus();
          }, 10);
          showLessButton.classList.add('hidden');
        }
      });
    } else {
      showAllButton.classList.add('hidden');
      showLessButton.classList.add('hidden');
    }
  };

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

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

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

  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 resetForm = () => {
    titleInput.value = '';
    roleInput.value = '';
    dateStartInput.value = '';
    dateEndInput.value = '';
    textareaInput.value = '';

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

  const closeForm = () => {
    backButton.setAttribute('aria-disabled', 'false');
    closeBtn.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');
    formSection.setAttribute('data-unsaved', 'false');
    closeBtn.classList.remove('not-saved');
  };

  // eslint-disable-next-line complexity
  const formValidation = () => {
    if (
      titleInput.value === '' ||
      roleInput.value === '' ||
      dateStartInput.value === '' ||
      dateEndInput.value === '' ||
      textareaInput.value === ''
    ) {
      saveExperienceButton.setAttribute('aria-disabled', 'true');
      backButton.setAttribute('aria-disabled', 'true');
    } else {
      saveExperienceButton.setAttribute('aria-disabled', 'false');
      formSection.setAttribute('data-unsaved', 'true');
      closeBtn.classList.add('not-saved');
    }

    if (
      titleInput.value === '' &&
      roleInput.value === '' &&
      dateStartInput.value === '' &&
      dateEndInput.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 editExperience = e => {
    const experience = e.target.closest(
      '.efl-learner-profile__section__experience'
    );
    const experienceTitle = experience.querySelector('h5').innerText;
    const experienceRole = experience.querySelector('.role').innerText;
    const experienceDescription = experience.querySelector('p:not(.role)')
      .innerHTML;
    const { editId, startDate, endDate } = experience.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);
    saveExperienceButton.setAttribute('aria-disabled', 'true');

    // fill inputs with default values
    titleInput.value = experienceTitle;
    roleInput.value = experienceRole;
    textareaInput.value = experienceDescription;
    dateStartInput.value = startDate;
    dateEndInput.value = endDate;
    rangePicker.setDates(new Date(startDate), new Date(endDate));

    characterCount.innerHTML = experienceTitle.length;
    roleCharacterCount.innerHTML = experienceRole.length;
    textareaCharacterCount.innerHTML = experienceDescription.length;

    popUp.classList.add('add-animation');
    deleteExperienceBtn.classList.remove('hidden');
    formSection.querySelector('h4 strong').innerText = formTitleEdit;
  };

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

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

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

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

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

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

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

    const previousExpPage = document.querySelector(
      '[data-behavior="efl-learner-profile-previous-experience"]'
    );
    const experienceListDiv = mainSection.querySelector(
      '.efl-learner-profile__section__experience--list'
    );
    const experienceListPageDiv = previousExpPage.querySelector(
      '.efl-learner-profile__section__experience--pagelist'
    );
    let experienceList = experienceListPageDiv.querySelectorAll(
      '.efl-learner-profile__section__experience'
    );
    let experienceJson = [];
    let count = 0;

    const newExperienceJson = `{
      "name": "${titleInput.value}" , 
      "role" : "${roleInput.value}", 
      "description" : "${textareaInput.value}", 
      "dateStarted" : "${dateStartInput.value}", 
      "dateCompleted" : "${dateEndInput.value}"}`;

    if (editMode === 'new') {
      experienceList.forEach((experience, index) => {
        const { experienceDetail } = experience.dataset;

        experienceJson[index] = JSON.parse(experienceDetail);
        count = index;
      });

      experienceJson[count + 1] = JSON.parse(newExperienceJson);
    } else if (editMode === 'edit') {
      const editId = formSection.getAttribute('data-editing');
      const editDateStart = new Date(dateStartInput.value);
      const editDateEnd = new Date(dateEndInput.value);
      const editStartMonth = editDateStart.getMonth();
      const editEndMonth = editDateEnd.getMonth();
      const editStartYear = editDateStart.getFullYear();
      const editEndYear = editDateEnd.getFullYear();

      const editPopupList = experienceListDiv.querySelector(
        `.efl-learner-profile__section__experience[data-edit-id="${editId}"]`
      );
      const editPageList = experienceListPageDiv.querySelector(
        `.efl-learner-profile__section__experience[data-edit-id="${editId}"]`
      );

      editPopupList.querySelector('h5').innerText = titleInput.value;
      editPopupList.querySelector('.role > strong').innerText = roleInput.value;
      editPopupList.querySelector('p:not(.role)').innerHTML =
        textareaInput.value;
      editPopupList.querySelector('.efl-category-title').innerText = `${
        monthNames[editStartMonth]
      } ${editStartYear} - ${monthNames[editEndMonth]} ${editEndYear}`;

      editPageList.querySelector('h5').innerText = titleInput.value;
      editPageList.querySelector('.role > strong').innerText = roleInput.value;
      editPageList.querySelector('p:not(.role)').innerHTML =
        textareaInput.value;
      editPageList.querySelector('.efl-category-title').innerText = `${
        monthNames[editStartMonth]
      } ${editStartYear} - ${monthNames[editEndMonth]} ${editEndYear}`;
      editPageList.setAttribute('data-experience-detail', newExperienceJson);

      experienceList = experienceListPageDiv.querySelectorAll(
        '.efl-learner-profile__section__experience'
      );

      experienceJson = [];

      // console.log(experienceList);

      experienceList.forEach((experience, index) => {
        const { experienceDetail } = experience.dataset;

        experienceJson[index] = JSON.parse(experienceDetail);
        // count = index;
      });
    } else if (editMode === 'delete') {
      const editId = formSection.getAttribute('data-editing');
      const deletePopupList = experienceListDiv.querySelector(
        `.efl-learner-profile__section__experience[data-edit-id="${editId}"]`
      );
      const deletePageList = experienceListPageDiv.querySelector(
        `.efl-learner-profile__section__experience[data-edit-id="${editId}"]`
      );

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

      experienceList = experienceListPageDiv.querySelectorAll(
        '.efl-learner-profile__section__experience'
      );

      experienceJson = [];

      // console.log(experienceList);

      experienceList.forEach((experience, index) => {
        const { experienceDetail } = experience.dataset;

        experienceJson[index] = JSON.parse(experienceDetail);
        // count = index;
      });

      if (experienceJson.length === 0) {
        placeholderText.classList.remove('hidden');
      }
    }
    // console.log(experienceJson);

    // sort the latest experience to top list
    const sortedExperience = experienceJson.sort(dateSorting);
    // console.log(sortedExperience);

    // empty popup previous experience list
    experienceListDiv.innerHTML = '';
    // empty page previous experience list
    experienceListPageDiv.innerHTML = '';

    sortedExperience.forEach((experience, index) => {
      const dateStart = new Date(experience.dateStarted);
      const dateEnd = new Date(experience.dateCompleted);

      const startMonth = dateStart.getMonth();
      const endMonth = dateEnd.getMonth();

      const startYear = dateStart.getFullYear();
      const endYear = dateEnd.getFullYear();

      const popupExperienceHtml = `
      <div class="efl-learner-profile__section__experience"  data-start-date="${
        experience.dateStarted
      }" data-end-date="${experience.dateCompleted}" data-edit-id="${index}">
        <div class="efl-learner-profile__section__experience__content">
          <div class="efl-category-title">${
            monthNames[startMonth]
          } ${startYear} - ${monthNames[endMonth]} ${endYear}</div>
          <h5>${experience.name}</h5>
          <p class="role"><strong>${experience.role}</strong></p>
          <p>${experience.description}</p>
        </div>
        <button aria-label="edit experience" class="efl-learner-profile__section__qualification--edit"></button>
      </div>`;

      const pageExperienceHtml = `
        <div class="efl-learner-profile__section__experience"
          data-experience-detail='{
            "name": "${experience.name}" , 
            "role" : "${experience.role}", 
            "description" : "${experience.description}", 
            "dateStarted" : "${experience.dateStarted}", 
            "dateCompleted" : "${
              experience.dateCompleted
            }"}' data-edit-id="${index}">
          <div class="efl-learner-profile__section__experience__content">
            <div class="efl-category-title">${
              monthNames[startMonth]
            } ${startYear} - ${monthNames[endMonth]} ${endYear}</div>
            <h5>${experience.name}</h5>
            <p class="role"><strong>${experience.role}</strong></p>
            <p>${experience.description}</p>
          </div>
        </div>`;

      // bind html object to popup previous experience list
      experienceListDiv.insertAdjacentHTML('beforeend', popupExperienceHtml);
      // bind html object to page previous experience list
      experienceListPageDiv.insertAdjacentHTML('beforeend', pageExperienceHtml);
    });

    showAll(eflExperiences, 2);
    showAll(eflPopUpExperiences, 3);
    editExperienceInit();

    formSection.removeAttribute('data-editing');

    resetForm();
    closeForm();
  };

  const saveExperience = (editMode, saveButton) => {
    if (editMode === 'delete') {
      updateExperienceDetails(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;
          }

          // profile completion notification
          updateProfileCompletion(3);

          updateExperienceDetails(editMode);
        }

        // Rive
        // if (animation.playingAnimationNames.includes('Animation')) {
        //   animation.pause('Animation');
        // } else {
        //   animation.play('Animation');
        // }

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

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

        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);

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

  // Event Listeners

  // Alert Modal

  continueEditingBtn.addEventListener('click', event => {
    closeModal(event);
    setTimeout(() => {
      saveExperienceButton.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);
    }
  });

  // Form

  // form-related actions only, efl-learner-pop-up.js for animation
  closeBtn.addEventListener('click', e => {
    e.preventDefault();

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

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

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

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

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

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

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

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

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

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

    formValidation();
  });

  roleInput.addEventListener('input', e => {
    roleCharacterCount.innerHTML = e.target.value.length;

    formValidation();
  });

  const today = new Date();

  rangePicker = new DateRangePicker(dateRangeElement, {
    maxDate: today,
    minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 150)),
    prevArrow: '',
    nextArrow: '',
    autohide: true,
    allowOneSidedRange: true,
  });

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

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

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

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

    resetForm();
    openForm();
    deleteExperienceBtn.classList.add('hidden');
    formSection.removeAttribute('data-editing');
    formSection.querySelector('h4 strong').innerText = formTitleAdd;
    rangePicker.destroy();
    rangePicker = new DateRangePicker(dateRangeElement, {
      maxDate: today,
      minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 150)),
      prevArrow: '',
      nextArrow: '',
      autohide: true,
      allowOneSidedRange: true,
    });
    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

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

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

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

    if (!formSection.getAttribute('data-editing')) {
      saveExperience('new', saveExperienceButton);
    } else {
      saveExperience('edit', saveExperienceButton);
    }

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

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

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

    saveExperience('delete', deleteExperienceBtn);
    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

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

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

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

  showAll(eflExperiences, 2);
  showAll(eflPopUpExperiences, 3);
  editExperienceInit();
};