Progressive Profile: Inline Component

import { gsap } from 'gsap';

export default parentElement => {
  // const MOBILE_BREAKPOINT = 820;
  const editPreference = parentElement.querySelector(
    '#edit-profile-preference'
  );
  const { editCta } = editPreference.dataset;
  const closeBtns = parentElement.querySelector(
    '.progressive-profile__questions--container .close-btn'
  );
  const wrapper = parentElement.querySelector('.progressive-profile__wrapper');
  const bannerOverlay = parentElement.querySelector(
    '.progressive-profile__overlay'
  );
  const questionsList = parentElement.querySelector(
    '.progressive-profile__questions--list'
  );
  const progressBar = parentElement.querySelector('.progress-bar-line');
  const signIn = parentElement.querySelector(
    '.progressive-profile__sign-in:not(.benefits)'
  );
  const successDiv = parentElement.querySelector(
    '.progressive-profile__sign-in.benefits'
  );
  const questionsContainer = parentElement.querySelector('.all-questions');
  const allQuestionsItem = parentElement.querySelectorAll('.all-questions > *');
  const questions = parentElement.querySelectorAll('.all-questions__single');
  const { fanid } = parentElement.dataset;

  const navigation = parentElement.querySelector(
    '.progressive-profile__questions--list__navigation'
  );
  const signinSignupPrev = parentElement.querySelector('.signin-signup-prev');
  const { inprogressTitle, completedTitle } = bannerOverlay.querySelector(
    'h2'
  ).dataset;
  const { editCopy } = bannerOverlay.querySelector('p').dataset;
  let answeredQuestions = 0;

  // Accessibility
  const updateTabIndex = activeItem => {
    allQuestionsItem.forEach(item => {
      const allInputs = item.querySelectorAll('input, a, button');

      allInputs.forEach(element => {
        // eslint-disable-next-line no-param-reassign
        element.tabIndex = '-1';
        if (element.type === 'checkbox') {
          // eslint-disable-next-line no-param-reassign
          element.tabIndex = '-1';
        } else if (element.type === 'radio') {
          // eslint-disable-next-line no-param-reassign
          element.nextElementSibling.tabIndex = '-1';
          // eslint-disable-next-line no-param-reassign
          element.tabIndex = '-1';
        }
      });
    });

    if (activeItem) {
      const activeItemEle = activeItem.querySelectorAll('input, a, button');

      activeItemEle.forEach(element => {
        // eslint-disable-next-line no-param-reassign
        element.tabIndex = '0';
        if (element.type === 'checkbox') {
          // eslint-disable-next-line no-param-reassign
          element.tabIndex = '0';
        } else if (element.type === 'radio') {
          // eslint-disable-next-line no-param-reassign
          element.nextElementSibling.tabIndex = '0';
          // eslint-disable-next-line no-param-reassign
          element.tabIndex = '-1';
        }
      });
    }
  };

  const checkAnsweredData = () => {
    answeredQuestions = 0;
    questions.forEach(question => {
      const answerNo = question.querySelectorAll('input:checked').length;
      const inputType = question.querySelector('input');
      const parentnextBtn = question.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .next'
      );
      const parentnextCta = question.querySelector(
        '.cta.cta--efl.personalisationNext'
      );
      // const { ctaText } = parentnextCta.dataset;

      if (inputType.type === 'checkbox' || inputType.type === 'radio') {
        if (answerNo) {
          question.setAttribute('data-answered', 'true');
          parentnextCta.setAttribute('aria-disabled', 'false');
          parentnextBtn.setAttribute('aria-disabled', 'false');
          // parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
          editPreference.innerHTML = editCta;
          editPreference.setAttribute(
            'aria-label',
            'edit the profile preferences'
          );
          answeredQuestions += 1;
        }
      }
    });
  };

  const updateIndexCardData = () => {
    if (answeredQuestions && answeredQuestions === questions.length) {
      if (completedTitle) {
        bannerOverlay.querySelector('h2').innerHTML = completedTitle;
        bannerOverlay.querySelector('p').innerHTML = editCopy;
        bannerOverlay.querySelector('p').classList.remove('hidden');
      }
    } else if (answeredQuestions) {
      if (inprogressTitle) {
        bannerOverlay.querySelector('h2').innerHTML = inprogressTitle;
        bannerOverlay.querySelector('p').innerHTML = editCopy;
        bannerOverlay.querySelector('p').classList.add('hidden');
      }
    }
  };

  async function updatePersonalisationDataCallback(personalisationData) {
    const url = `/Personalise/UpdateProgressivePersonalisation`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Cache-Control': 'no-cache',
        Pragma: 'no-cache',
        Expires: '0',
      },
      body: personalisationData,
    });

    return response.json();
  }

  function updatePersonalisationData(personalisationData) {
    try {
      // isAjaxRuning = true;
      updatePersonalisationDataCallback(personalisationData).then(response => {
        if (response) {
          // console.log(response);
          editPreference.innerHTML = editCta;
          editPreference.setAttribute(
            'aria-label',
            'edit the profile preferences'
          );
          checkAnsweredData();
          updateIndexCardData();
        }
      });
    } catch (e) {
      throw new Error('Unable to update personalisation data ::', e);
    }
  }

  const generatePersonalisationData = () => {
    const eflPersonalisation = [];

    questions.forEach((question, index) => {
      const questionElment = question.querySelector('.question');
      const { questionsType } = question.dataset;
      const { questionId } = questionElment.dataset;
      const questionText = questionElment.innerText;

      const answerDetails = [];
      const answerOptions = question.querySelectorAll('input');
      let inc = 0;

      answerOptions.forEach(option => {
        if (option.checked) {
          const { optionId } = option.closest(
            '.all-questions__single--answers'
          ).dataset;
          const answer = `{
            "answer": "${option.value}",
            "answerId": "${optionId}"
          }`;

          answerDetails[inc] = JSON.parse(answer);
          inc += 1;
        }
      });

      const questionDetails = `{
        "question": "${questionText}",
        "questionId": "${questionId}",
        "questionTag": "${questionsType}",
        "answerDetails": ${JSON.stringify(answerDetails)}
      }`;

      eflPersonalisation[index] = JSON.parse(questionDetails);
    });

    const personalisationData = `{
      "id": "${fanid}",
      "eflPersonalisation": ${JSON.stringify(eflPersonalisation)}
    }`;

    // console.log(personalisationData);

    return personalisationData;
  };

  window.addEventListener('DOMContentLoaded', () => {
    progressBar.setAttribute('max', questions.length);
  });

  // functions
  questions.forEach((question, index) => {
    const text = question.querySelector('.all-questions__single__index');
    const currentnextBtn = question.querySelector(
      '.progressive-profile__questions--list__navigation--up-down .next'
    );
    const currentprevBtn = question.querySelector(
      '.progressive-profile__questions--list__navigation--up-down .previous'
    );
    const nextCta = question.querySelector('.cta.cta--efl.personalisationNext');
    const signinprevBtn = parentElement.querySelector(
      '.progressive-profile__sign-in .previous'
    );
    const currentIndex = index < 9 ? `0${index + 1}` : index + 1;
    const totalQuestions =
      questions.length < 9 ? `0${questions.length}` : questions.length;

    text.innerHTML = `Question ${currentIndex}/${totalQuestions}`;

    const answerNo = question.querySelectorAll('input:checked').length;
    const inputType = question.querySelector('input');
    const parentnextBtn = question.querySelector(
      '.progressive-profile__questions--list__navigation--up-down .next'
    );
    const parentnextCta = question.querySelector(
      '.cta.cta--efl.personalisationNext'
    );
    // const { ctaText } = parentnextCta.dataset;

    if (inputType.type === 'checkbox' || inputType.type === 'radio') {
      if (answerNo) {
        question.setAttribute('data-answered', 'true');
        parentnextCta.setAttribute('aria-disabled', 'false');
        parentnextBtn.setAttribute('aria-disabled', 'false');
        // parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
        editPreference.innerHTML = editCta;
        editPreference.setAttribute(
          'aria-label',
          'edit the profile preferences'
        );
        answeredQuestions += 1;
      }
    }

    // previous question
    const goToPrevQuestion = () => {
      const prevQuestion = questions[progressBar.value - 2];
      const prevBtn = prevQuestion.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .previous'
      );
      const nextBtn = prevQuestion.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .next'
      );
      const prevnextCta = prevQuestion.querySelector(
        '.cta.cta--efl.personalisationNext'
      );

      if (!prevQuestion) {
        currentprevBtn.setAttribute('aria-disabled', 'false');
        return;
      }

      const questionHeight = prevQuestion.clientHeight;

      questionsContainer.style.minHeight = `${questionHeight}px`;

      if (progressBar.value <= 1) {
        progressBar.value -= 1;
        prevBtn.setAttribute('aria-disabled', 'true');
      } else {
        progressBar.value -= 1;
      }

      if (prevQuestion.getAttribute('data-answered') === 'true') {
        prevnextCta.setAttribute('aria-disabled', 'false');
        nextBtn.setAttribute('aria-disabled', 'false');
      } else {
        prevnextCta.setAttribute('aria-disabled', 'true');
        nextBtn.setAttribute('aria-disabled', 'true');
      }

      updateTabIndex(prevQuestion);

      gsap.to(questionsContainer, {
        transform: `translateY(-${prevQuestion.offsetTop}px)`,
        ease: 'power2',
        scrub: true,
        yoyo: 'true',
      });
    };

    // next question
    const goToNextQuestion = () => {
      if (!fanid) {
        questionsContainer.classList.add('sign-in');
        questionsContainer.style.minHeight = `${signIn.clientHeight}px`;

        updateTabIndex(signIn);

        gsap.to(questionsContainer, {
          transform: `translateY(-${signIn.offsetTop}px)`,
          ease: 'power2',
          scrub: true,
          yoyo: 'true',
        });
      } else {
        const personalisationData = generatePersonalisationData();

        updatePersonalisationData(personalisationData);

        if (progressBar.value === progressBar.max) {
          questionsContainer.classList.add('sign-in');
          questionsContainer.style.minHeight = `${successDiv.clientHeight}px`;

          updateTabIndex(successDiv);

          gsap.to(questionsContainer, {
            transform: `translateY(-${successDiv.offsetTop}px)`,
            ease: 'power2',
            scrub: true,
            yoyo: 'true',
          });
        }
      }

      if (!fanid || progressBar.value === progressBar.max) {
        return;
      }

      const nextQuestion = questions[progressBar.value];
      const prevBtn = nextQuestion.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .previous'
      );
      const nextBtn = nextQuestion.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .next'
      );
      const nextQuestionCta = nextQuestion.querySelector(
        '.cta.cta--efl.personalisationNext'
      );
      const questionHeight = nextQuestion.clientHeight;

      questionsContainer.style.minHeight = `${questionHeight}px`;

      if (progressBar.value < progressBar.max - 1) {
        progressBar.value += 1;
      } else {
        progressBar.value += 1;
        // nextBtn.setAttribute('aria-disabled', 'true');
      }

      if (progressBar.value >= 2) {
        prevBtn.setAttribute('aria-disabled', 'false');
      }

      if (nextQuestion.getAttribute('data-answered') === 'true') {
        nextQuestionCta.setAttribute('aria-disabled', 'false');
        nextBtn.setAttribute('aria-disabled', 'false');
      } else {
        nextQuestionCta.setAttribute('aria-disabled', 'true');
        nextBtn.setAttribute('aria-disabled', 'true');
      }

      updateTabIndex(nextQuestion);

      gsap.to(questionsContainer, {
        transform: `translateY(-${nextQuestion.offsetTop}px)`,
        ease: 'power2',
        scrub: true,
        yoyo: 'true',
      });
    };

    // Alert
    const openAlert = () => {
      const alert = questions[progressBar.value - 1].querySelector(
        '.all-questions__single--alert'
      );

      alert.classList.add('active');
    };

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

      if (nextCta.getAttribute('aria-disabled') === 'true') {
        openAlert();
        const currentQuestion = questions[progressBar.value - 1];
        const questionHeight = currentQuestion.clientHeight;

        questionsContainer.style.minHeight = `${questionHeight}px`;
        return;
      }

      goToNextQuestion();

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

    nextCta.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        nextCta.click();
        nextCta.blur();
      } else {
        e.preventDefault();

        closeBtns.focus();
      }
    });

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

      if (currentnextBtn.getAttribute('aria-disabled') === 'true') {
        return;
      }

      goToNextQuestion();

      closeBtns.focus();
    });

    currentnextBtn.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();

        currentnextBtn.click();
      }
    });

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

      if (currentprevBtn.getAttribute('aria-disabled') === 'true') {
        return;
      }

      goToPrevQuestion();

      closeBtns.focus();
    });

    currentprevBtn.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        e.preventDefault();

        currentprevBtn.click();
      }
    });

    // sign in functions
    if (signinprevBtn) {
      signinprevBtn.addEventListener('click', e => {
        e.preventDefault();

        if (currentprevBtn.getAttribute('aria-disabled') === 'true') {
          return;
        }

        const prevQuestion = questions[progressBar.value - 2];
        const prevBtn = prevQuestion.querySelector(
          '.progressive-profile__questions--list__navigation--up-down .previous'
        );
        const nextBtn = prevQuestion.querySelector(
          '.progressive-profile__questions--list__navigation--up-down .next'
        );

        // at sign in section
        if (questionsContainer.classList.contains('sign-in')) {
          const lastQuestion = questions[progressBar.value - 1];

          if (lastQuestion.getAttribute('data-answered') === 'true') {
            nextBtn.setAttribute('aria-disabled', 'false');
          } else {
            nextBtn.setAttribute('aria-disabled', 'true');
          }

          if (progressBar.value < 2) {
            prevBtn.setAttribute('aria-disabled', 'true');
          }

          questionsContainer.style.minHeight = `${lastQuestion.clientHeight}px`;
          questionsContainer.classList.remove('sign-in');

          updateTabIndex(lastQuestion);

          gsap.to(questionsContainer, {
            transform: `translateY(-${lastQuestion.offsetTop}px)`,
            ease: 'power2',
            scrub: true,
            yoyo: 'true',
          });
        }
      });

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

    // Accessibility
    const updateOptLabel = () => {
      const questionElement = question.querySelector('.question');
      const questionText = questionElement.innerText;
      const answerOptions = question.querySelectorAll('input');
      const firstOpt = answerOptions[0];
      const optLabel = firstOpt.nextElementSibling;
      const optText = optLabel.innerText;

      if (firstOpt.type === 'checkbox') {
        firstOpt.setAttribute('aria-label', `${questionText} ${optText}`);
      } else if (firstOpt.type === 'radio') {
        const firstoptLabel = document.createElement('div');

        firstoptLabel.className = 'visually-hidden';
        firstoptLabel.innerText = `${questionText}`;
        optLabel.prepend(firstoptLabel);
      }
    };

    updateOptLabel();
  });

  updateIndexCardData();

  // Close Question Modal
  if (closeBtns) {
    closeBtns.addEventListener('click', e => {
      e.preventDefault();

      document.body.style.overflow = null;
      wrapper.classList.remove('enlarged-image');
      /* eslint-disable no-param-reassign */
      parentElement.classList.remove('expanded');
      parentElement.style.marginTop = ``;
      /* eslint-disable no-param-reassign */
      bannerOverlay.classList.remove('overlay-hidden');

      setTimeout(() => {
        questionsList.classList.remove('expanded');
      }, 10);
      closeBtns.blur();
      closeBtns.tabIndex = '-1';
      editPreference.focus();
      updateTabIndex();
    });

    closeBtns.addEventListener('keydown', e => {
      if (e.keyCode === 13) {
        closeBtns.click();
      } else if (e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
      } else {
        // empty
      }
    });
  }

  /* window.addEventListener('scroll', () => {
    const containerHeight = document.documentElement.clientHeight;
    const allNavigation = parentElement.querySelectorAll(
      '.progressive-profile__questions--list__navigation--up-down'
    );
    const bottomGap = 102;

    allNavigation.forEach(nav => {
      // eslint-disable-next-line no-param-reassign
      nav.style.top = `${containerHeight - bottomGap}px`;
    });
  }); */

  window.addEventListener('click', e => {
    const clickedElement = e.target;

    if (clickedElement.tagName === 'INPUT') {
      const questionsContainerParent = clickedElement.closest(
        '.all-questions__single'
      );
      const progressiveProfile = clickedElement.closest('.progressive-profile');

      if (!questionsContainerParent || !progressiveProfile) {
        return;
      }

      const alert = questionsContainerParent.querySelector(
        '.all-questions__single--alert'
      );
      const inputs = questionsContainerParent.querySelectorAll('input');
      const parentnextBtn = questionsContainerParent.querySelector(
        '.progressive-profile__questions--list__navigation--up-down .next'
      );
      const parentnextCta = questionsContainerParent.querySelector(
        '.cta.cta--efl.personalisationNext'
      );

      if (clickedElement.type === 'checkbox') {
        let answered = false;

        inputs.forEach(element => {
          if (element.checked) {
            answered = true;
          }
        });

        if (answered === true) {
          questionsContainerParent.setAttribute('data-answered', 'true');
          parentnextCta.setAttribute('aria-disabled', 'false');
          parentnextBtn.setAttribute('aria-disabled', 'false');
          // if alert is active, remove it
          alert.classList.remove('active');
          const currentQuestion = questions[progressBar.value - 1];
          const questionHeight = currentQuestion.clientHeight;

          // parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
          questionsContainer.style.minHeight = `${questionHeight}px`;
        } else {
          questionsContainerParent.setAttribute('data-answered', 'false');
          parentnextCta.setAttribute('aria-disabled', 'true');
          parentnextBtn.setAttribute('aria-disabled', 'true');
          // parentnextCta.innerHTML = `${ctaText}`;
        }
      } else if (clickedElement.type === 'radio') {
        questionsContainerParent.setAttribute('data-answered', 'true');
        parentnextCta.setAttribute('aria-disabled', 'false');
        parentnextBtn.setAttribute('aria-disabled', 'false');
        // parentnextCta.innerHTML = `${ctaText}(${answerNo})`;
        alert.classList.remove('active');
        const currentQuestion = questions[progressBar.value - 1];
        const questionHeight = currentQuestion.clientHeight;

        questionsContainer.style.minHeight = `${questionHeight}px`;
      }
    }
  });

  window.addEventListener('keydown', event => {
    if ((event.keyCode === 13 || event.keyCode === 32) && parentElement) {
      const { target } = event;
      const progressiveProfile = target.closest('.progressive-profile');

      if (!progressiveProfile) {
        return;
      }

      if (target.previousElementSibling) {
        if (target.previousElementSibling.type === 'radio') {
          target.click();
          target.focus();
        }
      } else if (target.type === 'checkbox') {
        target.click();
        target.focus();
      }
    }
  });

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

      updateTabIndex(allQuestionsItem[0]);

      gsap.to(questionsContainer, {
        transform: `translateY(0)`,
        ease: 'power2',
        scrub: true,
        yoyo: 'true',
      });
    });

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

  // Open Questions Component
  editPreference.addEventListener('click', e => {
    e.preventDefault();

    document.body.style.overflow = 'hidden';
    wrapper.classList.add('enlarged-image');
    /* eslint-disable no-param-reassign */
    parentElement.classList.add('expanded');
    parentElement.style.marginTop = `${-(
      parentElement.offsetTop - window.scrollY
    )}px`;
    /* eslint-disable no-param-reassign */
    bannerOverlay.classList.add('overlay-hidden');
    navigation.classList.remove('hidden');

    progressBar.value = 1;

    updateTabIndex(allQuestionsItem[0]);
    closeBtns.tabIndex = '0';
    closeBtns.focus();

    gsap.to(questionsContainer, {
      transform: `translateY(0px)`,
      ease: 'power2',
      scrub: true,
      yoyo: 'true',
    });

    setTimeout(() => {
      questionsList.classList.add('expanded');
    }, 10);
  });

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

  updateTabIndex();
};