Efl Learner Profile Onboarding Journey

import Glide from '@glidejs/glide';
import { Rive, Fit, Layout } from '@rive-app/canvas';

export default parentElement => {
  const { onboardingJourney } = parentElement.dataset;
  const slides = parentElement.querySelectorAll('.glide__slides > *');
  const loader = parentElement.querySelector('.loading-bar > span');
  let loaderPercentage = 0;
  const firstStep = parentElement.querySelector('.first-step');
  const carouselStep = parentElement.querySelector('.carousel-step');
  const skipLinks = carouselStep.querySelectorAll('.skip-journey');
  const tryAgainCta = parentElement.querySelector('.tryAgain');
  const copyText = firstStep.querySelector('p');
  const { textDefault, lostConnection } = copyText.dataset;
  let glide;
  const profileTabPanels = document.querySelectorAll(
    '.efl-page-content-subpage[data-page]'
  );
  const MOBILE_BREAKPOINT = 820;

  document.addEventListener('readystatechange', () => {
    if (onboardingJourney === 'true') {
      profileTabPanels.forEach(panel => {
        panel.classList.add('onboarding-loading');
      });
    } else {
      profileTabPanels.forEach(panel => {
        panel.classList.remove('onboarding-loading');
      });
    }
  });

  async function createPlayerProfileCallback() {
    const url = `/Personalise/CreatePlayerProfile`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });

    return response.json();
  }
  function createPlayerProfile() {
    try {
      tryAgainCta.classList.add('hidden');
      copyText.innerHTML = textDefault;
      createPlayerProfileCallback().then(response => {
        if (response && response.isFirstTimeVisit) {
          setTimeout(() => {
            firstStep.classList.add('hidden');
            carouselStep.classList.remove('hidden');
            parentElement.classList.add('ajax-completed');

            const bulletContainer = parentElement.querySelector(
              '.efl-learner-profile-onboarding-journey__bullets'
            );
            const firstpip = bulletContainer.firstElementChild;

            firstpip.focus();

            // profile completion notification
            const notification = document.querySelector(
              '.efl-global-notifications.priority-3'
            );

            if (notification) {
              const notifyBell = document.querySelector(
                '.global-site-navigation__level1.site-notification'
              );

              notifyBell.classList.add('new');
              notification.classList.remove('hidden');
            }

            glide.update({
              autoplay: 10000,
            });
          }, 1000);
        }
      });
    } catch (e) {
      tryAgainCta.classList.remove('hidden');
      copyText.innerHTML = lostConnection;
      throw new Error('Unable to create profile ::', e);
    }
  }

  if (onboardingJourney === 'true') {
    parentElement.classList.remove('hidden');
    skipLinks.forEach(link => {
      link.addEventListener('click', e => {
        e.preventDefault();
        parentElement.classList.add('hidden');
        profileTabPanels.forEach(panel => {
          panel.classList.remove('onboarding-loading');
        });
      });
    });
    tryAgainCta.addEventListener('click', e => {
      e.preventDefault();
      createPlayerProfile();
    });
    createPlayerProfile();
  }

  const defaultOptions = {
    perView: 1,
    autoplay: false,
    animationDuration: '600',
    animationTimingFunc: 'cubic-bezier(0.16, 1, 0.3, 1)',
    hoverpause: false,
    type: 'slider',
    gap: 0,
  };

  // Rive
  const footballCanvas = parentElement.querySelector(
    '#onboarding-journey-football-animation'
  );

  const lyout = new Layout({
    fit: Fit.Cover,
  });

  const riveAnimation = new Rive({
    src: '/assets/example-content/learner_profile_onboarding.riv',
    canvas: footballCanvas,
    layout: lyout,
    onLoad: () => {
      riveAnimation.resizeDrawingSurfaceToCanvas();
    },
  });

  riveAnimation.play('Load in');
  riveAnimation.play('Ball spin');

  const timer = setInterval(() => {
    if (loaderPercentage < 100) {
      loaderPercentage += 1;
      loader.style.width = `${loaderPercentage}%`;
    } else {
      clearInterval(timer);
    }
  }, 100);

  glide = new Glide(parentElement, { ...defaultOptions });
  const bulletContainer = document.createElement('div');

  bulletContainer.classList.add(
    'efl-learner-profile-onboarding-journey__bullets'
  );
  bulletContainer.dataset.glideEl = 'controls[nav]';

  slides.forEach((slide, index) => {
    const button = document.createElement('button');

    button.dataset.glideDir = `=${index}`;
    if (!index) {
      button.ariaLabel = `Onboarding Journey Page - ${index + 1} active`;
    } else {
      button.ariaLabel = `Onboarding Journey Page - ${index + 1}`;
    }
    button.style.animationDuration = `${600 / 1000}s`;
    bulletContainer.appendChild(button);

    const stepInfo = slide.querySelector('.step-info');

    if (stepInfo) {
      const nextCta = stepInfo.querySelector('.cta');

      if (nextCta) {
        nextCta.addEventListener('click', event => {
          event.preventDefault();
          const nextSlide = index + 1;

          if (nextSlide < slides.length) {
            glide.go(`=${nextSlide}`);
            setTimeout(() => {
              const firstpip = bulletContainer.firstElementChild;

              firstpip.focus();
            }, 50);
          } else {
            parentElement.classList.add('hidden');
            profileTabPanels.forEach(panel => {
              panel.classList.remove('onboarding-loading');
            });
          }
        });

        nextCta.addEventListener('keydown', event => {
          if (event.keyCode === 13) {
            nextCta.click();
          } else if (event.shiftKey && event.keyCode === 9) {
            setTimeout(() => {
              const lastpip = bulletContainer.lastElementChild;

              lastpip.focus();
            }, 50);
          }
        });
      }
    }
  });

  const alignTitle = () => {
    slides.forEach(slide => {
      const stepInfo = slide.querySelector('.step-info');

      if (stepInfo) {
        const nextCta = stepInfo.querySelector('.cta');
        const heading = stepInfo.querySelector('h2');
        const img = slide.querySelector('img');
        const imgWrapper = slide.querySelector(
          '.carousel-skip-step__player-wrap'
        );

        if (nextCta) {
          if (window.innerWidth < MOBILE_BREAKPOINT) {
            nextCta.style.top = `${window.innerHeight - 68}px`;
            heading.style.marginTop = `${(window.innerHeight - 510) / 2 - 5}px`;
            if (window.innerHeight <= 700) {
              img.style.width = `34rem`;
              imgWrapper.style.left = `calc(50vw - 17rem)`;
              heading.style.marginTop = `${(window.innerHeight - 510) / 2 -
                5}px`;
            } else {
              img.removeAttribute('style');
              imgWrapper.removeAttribute('style');
            }
          } else {
            nextCta.removeAttribute('style');
            heading.removeAttribute('style');
          }
        }
      }
    });
  };

  window.addEventListener('DOMContentLoaded', () => {
    alignTitle();
  });

  window.addEventListener('resize', () => {
    alignTitle();
  });

  parentElement.querySelector('.carousel-step').appendChild(bulletContainer);

  glide.mount();

  glide.on('run.after', () => {
    if (glide.index + 1 === slides.length) {
      glide.update({
        autoplay: false,
      });
    }
  });

  // Accessiblity Features
  const paginationElements = bulletContainer.querySelectorAll(`button`);

  const pipsAccessibility = () => {
    glide.on('run.after', () => {
      paginationElements.forEach(item => {
        if (item.classList.contains('glide__bullet--active')) {
          // eslint-disable-next-line no-param-reassign
          item.ariaSelected = true;

          // eslint-disable-next-line no-param-reassign
          const label = item.ariaLabel;

          // eslint-disable-next-line no-param-reassign
          item.ariaLabel = `${label} active`;
        } else {
          // eslint-disable-next-line no-param-reassign
          item.ariaSelected = false;
          if (item.ariaLabel) {
            const label = item.ariaLabel.replace(' active', '');

            // eslint-disable-next-line no-param-reassign
            item.ariaLabel = `${label}`;
          }
        }
      });
    });
  };

  const focuslooponslide = () => {
    const lastpip = bulletContainer.lastElementChild;

    lastpip.addEventListener('keydown', e => {
      if (e.shiftKey && e.keyCode === 9) {
        // empty
      } else if (e.keyCode === 9) {
        e.preventDefault();
        slides.forEach(slide => {
          if (slide.classList.contains('glide__slide--active')) {
            slide.querySelector('.nextStep').focus();
          }
        });
      }
    });
  };

  pipsAccessibility();
  focuslooponslide();

  const tabIndexUpdate = () => {
    slides.forEach(slide => {
      if (slide.classList.contains('glide__slide--active')) {
        if (slide.querySelector('.cta')) {
          slide.querySelector('.cta').setAttribute('tabindex', '0');
        }
        if (slide.querySelector('.skip-journey')) {
          slide.querySelector('.skip-journey').setAttribute('tabindex', '0');
        }
        setTimeout(() => {
          const firstpip = bulletContainer.firstElementChild;

          firstpip.focus();
        }, 50);
      } else if (slide.querySelector('.cta')) {
        slide.querySelector('.cta').setAttribute('tabindex', '-1');
        if (slide.querySelector('.skip-journey')) {
          slide.querySelector('.skip-journey').setAttribute('tabindex', '-1');
        }
      }
    });
  };

  glide.on('run.before', () => {
    tabIndexUpdate();
  });

  glide.on('run.after', () => {
    tabIndexUpdate();
  });

  glide.on('build.after', () => {
    tabIndexUpdate();
  });

  return glide;
};