Pre Req Modal

import { Dialog } from '../lightbox-overlay/lightbox-overlay';

export default parentElement => {
  const DIALOG_ID = 'pre-req-global-access-dialog';
  const { preReqCheck } = parentElement.dataset;

  const generateLightBox = labelId => {
    let html = parentElement.outerHTML;

    html = html.replace('find-courses hidden', 'find-courses');
    return `
    <div role="dialog" id="${DIALOG_ID}" aria-labelledby="${labelId}" aria-modal="true" class="lightbox-overlay">
      ${html}
    </div>`;
  };

  const removeLightBox = () => {
    document.getElementById(DIALOG_ID).remove();
    if (document.querySelector('#find-course-near-me')) {
      document
        .querySelector('#find-course-near-me')
        .closest('a')
        .focus();
    }
  };

  const preReqButton = document.querySelector('#find-course-near-me');
  const preReqButtonAll = document.querySelectorAll('.pre-req-global-access');
  // const onlineCTA = document.querySelector('#efl-online-book-course');

  if (!preReqButton && !preReqButtonAll.length) {
    return;
  }

  if (preReqButton && preReqCheck === 'true') {
    parentElement.remove();
    return;
  }

  const openLightbox = focusBtn => {
    // Create the lightbox
    const lightboxContainer = document.createElement('div');

    lightboxContainer.innerHTML = generateLightBox({
      labelId: focusBtn.getAttribute('id'),
    });
    document.body.appendChild(lightboxContainer);
    // eslint-disable-next-line no-new
    new Dialog({
      dialogId: DIALOG_ID,
      focusAfterClosed: focusBtn,
      focusFirst: 'close',
      closeCallBack: () => removeLightBox(),
    });

    if (
      focusBtn.classList.contains('pre-req-global-access') &&
      preReqCheck === 'true'
    ) {
      const eligibleCta = lightboxContainer.querySelector(
        '.confirmation-payment'
      );

      eligibleCta.setAttribute('href', focusBtn.getAttribute('href'));
    }

    lightboxContainer.querySelector('#close').focus();
  };

  /* if (onlineCTA) {
    onlineCTA.addEventListener('click', event => {
      event.preventDefault();
      const allSteps = parentElement.querySelector('.find-courses__search');
      const screen = allSteps.querySelector('.search-step-5');

      if (screen) {
        openLightbox(onlineCTA);
      }
    });
  } */

  const openPreReqModal = (event, preReqCta) => {
    event.preventDefault();
    openLightbox(preReqCta);

    const modalDiv = document.querySelector(`#${DIALOG_ID}`);
    const allSteps = modalDiv.querySelector('.find-courses__search');
    const screen1 = allSteps.querySelector('.search-step-1');
    const screen2 = allSteps.querySelector('.search-step-2');
    const screen3 = allSteps.querySelector('.search-step-3');

    screen1.classList.remove('hidden');
    screen2.classList.add('hidden');
    screen3.classList.add('hidden');

    if (preReqCheck === 'true') {
      setTimeout(() => {
        screen1.classList.add('hidden');
        screen2.classList.remove('hidden');
      }, 1000);
    } else {
      setTimeout(() => {
        screen1.classList.add('hidden');
        screen3.classList.remove('hidden');
      }, 1000);
    }
  };

  if (preReqButton) {
    preReqButton.addEventListener('click', event => {
      openPreReqModal(event, preReqButton);
    });
  }

  if (preReqButtonAll.length) {
    preReqButtonAll.forEach(preReqCta => {
      preReqCta.addEventListener('click', event => {
        openPreReqModal(event, preReqCta);
      });
    });
  }
};