Efl Learner Profile Tab

export default parentElement => {
  const firstNavTab = document.body.querySelector(
    '.global-site-navigation > ul > li.global-site-navigation__level1:first-child'
  );
  const self = parentElement.firstElementChild;
  const MOBILE_BREAKPOINT = 820;
  let DEFAULT_SCREEN_WIDTH;
  const tabLinks = parentElement.querySelectorAll('a[role=tab]');
  const onBoardingJourney = document.querySelector(
    '[data-behavior="efl-learner-profile-onboarding-journey"]'
  );
  const profileTabPanels = document.querySelectorAll(
    '.efl-page-content-subpage[data-page]'
  );
  const loadScreen = document.querySelector(
    '[data-behavior="efl-load-screen"]'
  );

  if (!onBoardingJourney) {
    document.addEventListener('readystatechange', () => {
      profileTabPanels.forEach(panel => {
        panel.classList.remove('onboarding-loading');
      });
    });
  }

  const findPos = obj => {
    // eslint-disable-next-line no-unused-vars
    let curleft = 0;
    // let curtop = 0;

    if (obj.offsetParent) {
      curleft = obj.offsetLeft;
      // curtop = obj.offsetTop;

      // eslint-disable-next-line no-param-reassign, no-cond-assign
      while ((obj = obj.offsetParent)) {
        curleft += obj.offsetLeft;
        // curtop += obj.offsetTop;
      }
    }
    return curleft;
  };

  const setTabPadding = () => {
    if (
      window.innerWidth !== DEFAULT_SCREEN_WIDTH &&
      window.innerWidth > MOBILE_BREAKPOINT
    ) {
      self.style.justifyContent = 'start';
      self.style.paddingLeft = `${findPos(firstNavTab)}px`;

      DEFAULT_SCREEN_WIDTH = window.innerWidth;
    } else if (window.innerWidth < MOBILE_BREAKPOINT) {
      self.style.paddingLeft = null;
    }

    // query param active tab
    const params = new Proxy(new URLSearchParams(window.location.search), {
      get: (searchParams, prop) => searchParams.get(prop),
    });

    if (params.tab) {
      const tabId = params.tab;
      const tabLink = parentElement.querySelector(`a[id=${tabId}]`);

      tabLink.click();
      loadScreen.style.height = `${window.innerHeight}px`;
    }
  };

  tabLinks.forEach(link => {
    link.addEventListener('click', e => {
      const redirectUrl = `${window.location.origin}${
        window.location.pathname
      }`;
      const tabId = e.target.id;

      window.history.pushState({}, '', `${redirectUrl}?tab=${tabId}`);

      if (tabId === 'my-learning') {
        if (!loadScreen) {
          return;
        }

        if (loadScreen.getAttribute('data-load-screen') === 'true') {
          loadScreen.classList.remove('hidden');
          document.body.style.overflow = 'hidden';
          const headerContainer = document.querySelector(
            '.global-fixed-header'
          );
          const profiletabHeight = document.querySelector(
            '.efl-learner-profile-tab--container'
          ).offsetHeight;

          if (!headerContainer && !profiletabHeight) {
            return;
          }

          const screenHeight = window.innerHeight;

          // eslint-disable-next-line no-param-reassign
          loadScreen.style.height = `${screenHeight -
            headerContainer.offsetHeight -
            profiletabHeight}px`;

          setTimeout(() => {
            loadScreen.classList.add('hidden');
            document.body.style.overflow = null;
            loadScreen.setAttribute('data-load-screen', 'false');
          }, 1000);
        }
      }
    });
  });

  setTabPadding();
  window.addEventListener('load', setTabPadding);

  window.addEventListener('resize', setTabPadding);
};