Bundled Learning Promo: Default

import { gsap } from 'gsap';
import { Rive, Fit, Layout } from '@rive-app/canvas';
import Player from '@vimeo/player';
import { loadYouTubeApi } from '../video/video';

export default parentElement => {
  // Declarations
  const MOBILE_BREAKPOINT = 820;
  const startBtn = parentElement.querySelector('.bundled-learning-promo-start');
  const closeBtns = parentElement.querySelector(
    '.bundled-learning-promo__questions--container .close-btn'
  );
  const progressBar = parentElement.querySelector('.progress-bar-line');
  const bannerOverlay = parentElement.querySelector(
    '.bundled-learning-promo__overlay'
  );
  const wrapper = parentElement.querySelector(
    '.bundled-learning-promo__wrapper'
  );
  const questionsList = parentElement.querySelector(
    '.bundled-learning-promo__questions--list'
  );
  const allQuestions = parentElement.querySelector('.all-questions');
  const allQuestionsItem = parentElement.querySelectorAll('.all-questions > *');
  const questions = parentElement.querySelectorAll('.all-questions__single');
  const questionVideo = parentElement.querySelectorAll(
    '.all-questions__single.question-video'
  );
  const signIn = parentElement.querySelector(
    '.bundled-learning-promo__sign-in'
  );
  const promoType = parentElement.classList.contains('quiz');
  const {
    fanid,
    redirectUrl,
    bundleId,
    articleId,
    quizRedirectUrl,
  } = parentElement.dataset;
  const totalCorrectAns = [];

  async function updateOnboardingDetailsCallback(updateData, type) {
    let url;

    if (type === 'quiz') {
      url = `/Bundling/UpdateBundledLearning`;
    } else {
      url = `/Bundling/UpdateOnboardingDetails`;
    }
    // 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: updateData,
    });

    return response.json();
  }

  function updateOnboardingData(updateData, type) {
    try {
      // isAjaxRuning = true;
      updateOnboardingDetailsCallback(updateData, type).then(response => {
        if (type === 'quiz') {
          console.log(response.id);
          if (response && response.id && response.id !== null) {
            let bundleQuizPromo = [];
            const quizArticles = `{"id":"${fanid}","articleId": "${articleId}"}`;

            if (localStorage.getItem('bundleQuizPromo')) {
              bundleQuizPromo = JSON.parse(
                localStorage.getItem('bundleQuizPromo')
              );
              const idExist = bundleQuizPromo.find(
                val => val.articleId === articleId
              );

              if (!idExist) {
                bundleQuizPromo[bundleQuizPromo.length] = JSON.parse(
                  quizArticles
                );
                localStorage.setItem(
                  'bundleQuizPromo',
                  JSON.stringify(bundleQuizPromo)
                );
              }
            } else {
              localStorage.setItem('bundleQuizPromo', `[${quizArticles}]`);
            }

            // eslint-disable-next-line no-restricted-globals
            location.href = quizRedirectUrl;
          }
        } else if (response) {
          // eslint-disable-next-line no-restricted-globals
          location.href = redirectUrl;
        }
      });
    } catch (e) {
      throw new Error('Unable to update onboarding details ::', e);
    }
  }

  const generateQuizJsonData = rightAns => {
    return `{
      "id": "${fanid}",
      "bundles": [
        {
          "bundleId": "${bundleId}",
          "isCompletedFirstTime": null,
          "bundleArticles": [
            {
            "articleID": "${articleId}",
            "totalQuestion":"${questions.length}",
            "noOfCorrectAnswer":"${rightAns}"
            }
          ]
        }
      ]
    }`;
  };

  const generateJsonData = () => {
    const bundledOnboardingQues = [];

    questions.forEach((question, index) => {
      const questionElment = question.querySelector('.question');
      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 { answerId } = option.closest(
            '.all-questions__single--answers'
          ).dataset;
          const answer = `{
            "answer": "${option.value}",
            "answerId": "${answerId}"
          }`;

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

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

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

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

    return updateData;
  };

  document.addEventListener('readystatechange', () => {
    if (!fanid) {
      localStorage.removeItem('bundleQuizPromo');
    }

    if (localStorage.getItem('bundleQuizPromo')) {
      const quizArticles = JSON.parse(localStorage.getItem('bundleQuizPromo'));

      quizArticles.forEach(article => {
        if (
          article.id === fanid &&
          article.articleId === articleId &&
          document.querySelector(`[data-article-id="${article.articleId}"]`)
        ) {
          document
            .querySelector(`[data-article-id="${article.articleId}"]`)
            .classList.add('hidden');
        }
      });
    }
  });

  // 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';
        }
      });
    }
  };

  // functions
  questions.forEach((question, index) => {
    const text = question.querySelector('.all-questions__single__index');
    const currentnextBtn = question.querySelector(
      '.bundled-learning-promo__questions--list__navigation--up-down .next'
    );
    const currentprevBtn = question.querySelector(
      '.bundled-learning-promo__questions--list__navigation--up-down .previous'
    );
    const nextCta = question.querySelector('.cta.cta--efl.personalisationNext');
    const feedBack = question.nextElementSibling;
    const feedbackCta = feedBack.querySelectorAll('.cta.cta--efl.feedbackNext');
    const signinprevBtn = parentElement.querySelector(
      '.bundled-learning-promo__sign-in .previous'
    );
    const getSelectedOptions = question.querySelectorAll('input');

    const currentIndex = index < 9 ? `0${index + 1}` : index + 1;

    const totalQuestions =
      questions.length < 9 ? `0${questions.length}` : questions.length;

    if (!promoType) {
      text.style.display = 'none';
    }

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

    // previous question
    const goToPrevQuestion = () => {
      const prevQuestion = questions[progressBar.value - 2];
      const prevBtn = prevQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .previous'
      );
      const nextBtn = prevQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .next'
      );
      const prevnextCta = prevQuestion.querySelector(
        '.cta.cta--efl.personalisationNext'
      );
      const getRightFeedback = parentElement.querySelectorAll(
        '.right-feedback'
      );
      const getWrongFeedback = parentElement.querySelectorAll(
        '.wrong-feedback'
      );

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

      if (promoType) {
        getRightFeedback.forEach(feedback => {
          feedback.classList.add('hidden');
        });
        getWrongFeedback.forEach(feedback => {
          feedback.classList.add('hidden');
        });
      }

      const questionHeight = prevQuestion.clientHeight;

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

      if (progressBar.value <= 2) {
        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(allQuestions, {
        transform: `translateY(-${prevQuestion.offsetTop}px)`,
        ease: 'power2',
        scrub: true,
        yoyo: 'true',
      });
    };

    // next question
    const goToNextQuestion = () => {
      const signinnextBtn = parentElement.querySelector(
        '.bundled-learning-promo__sign-in .next'
      );

      if (!fanid) {
        signinnextBtn.setAttribute('aria-disabled', 'true');
        allQuestions.classList.add('sign-in');
        allQuestions.style.minHeight = `${signIn.clientHeight}px`;

        gsap.to(allQuestions, {
          transform: `translateY(-${signIn.offsetTop}px)`,
          ease: 'power2',
          scrub: true,
          yoyo: 'true',
        });
        updateTabIndex(signIn);
      } else if (progressBar.value === progressBar.max) {
        // last question
        if (promoType) {
          let rightAns = 0;

          totalCorrectAns.forEach(ans => {
            if (ans) {
              rightAns += 1;
            }
          });

          // console.log(totalCorrectAns);
          // console.log(rightAns);
          const updateData = generateQuizJsonData(rightAns);

          updateOnboardingData(updateData, 'quiz');
        } else {
          const updateData = generateJsonData();

          updateOnboardingData(updateData, 'onboarding');
        }
      }

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

      const nextQuestion = questions[progressBar.value];
      const prevBtn = nextQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .previous'
      );
      const nextBtn = nextQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .next'
      );
      const nextCTA = nextQuestion.querySelector(
        '.cta.cta--efl.personalisationNext'
      );
      const questionHeight = nextQuestion.clientHeight;

      allQuestions.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') {
        nextCTA.setAttribute('aria-disabled', 'false');
        nextBtn.setAttribute('aria-disabled', 'false');
      } else {
        nextCTA.setAttribute('aria-disabled', 'true');
        nextBtn.setAttribute('aria-disabled', 'true');
      }

      updateTabIndex(nextQuestion);

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

    const goToFeedback = () => {
      const selectedAnswers = [];
      const optionContainer = question.querySelector(
        '.all-questions__single--options'
      );
      const getCorrectAnswer = JSON.parse(optionContainer.dataset.answer);
      const correctAnswer = getCorrectAnswer.filter(item => item);
      const currentQuestion = questions[progressBar.value - 1];
      const getFeedbackContainer = currentQuestion.nextElementSibling;
      const lastFeedbackCta = getFeedbackContainer.querySelectorAll(
        '.cta.cta--efl.feedbackNext'
      );
      const getRightFeedback = getFeedbackContainer.querySelector(
        '.right-feedback'
      );
      const getWrongFeedback = getFeedbackContainer.querySelector(
        '.wrong-feedback'
      );
      const rightfeedbackCanvas = getFeedbackContainer.querySelector(
        '.all-questions__feedback--right-icon'
      );
      const wrongfeedbackCanvas = getFeedbackContainer.querySelector(
        '.all-questions__feedback--wrong-icon'
      );
      const lyout = new Layout({
        fit: Fit.Cover,
      });

      // last question
      if (progressBar.value === progressBar.max) {
        lastFeedbackCta.forEach(lastCta => {
          lastCta.innerHTML = lastCta.getAttribute('data-last-cta'); // eslint-disable-line no-param-reassign
        });
      }

      getSelectedOptions.forEach(option => {
        if (option.checked) {
          selectedAnswers.push(option.value);
        }
      });

      if (
        selectedAnswers.length === correctAnswer.length &&
        selectedAnswers.every(answer => correctAnswer.includes(answer))
      ) {
        getRightFeedback.classList.remove('hidden');
        getWrongFeedback.classList.add('hidden');

        const rightAnimation = new Rive({
          src: '/assets/example-content/quiz-correct-feedback.riv',
          canvas: rightfeedbackCanvas,
          layout: lyout,
          onLoad: () => {
            rightAnimation.resizeDrawingSurfaceToCanvas();
          },
        });

        rightAnimation.play('Correct');

        totalCorrectAns[progressBar.value - 1] = true;
      } else {
        getRightFeedback.classList.add('hidden');
        getWrongFeedback.classList.remove('hidden');

        const wrongAnimation = new Rive({
          src: '/assets/example-content/quiz-incorrect-feedback.riv',
          canvas: wrongfeedbackCanvas,
          layout: lyout,
          onLoad: () => {
            wrongAnimation.resizeDrawingSurfaceToCanvas();
          },
        });

        wrongAnimation.play('Incorrect');
        totalCorrectAns[progressBar.value - 1] = false;
      }

      allQuestions.style.minHeight = `${feedBack.clientHeight}px`;

      updateTabIndex(feedBack);

      gsap.to(allQuestions, {
        transform: `translateY(-${feedBack.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');
    };

    if (feedbackCta) {
      feedbackCta.forEach(cta => {
        cta.addEventListener('click', e => {
          e.preventDefault();

          goToNextQuestion();

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

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

            closeBtns.focus();
          }
        });
      });
    }

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

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

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

      if (promoType) {
        goToFeedback();
      } else {
        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;
      }

      if (promoType) {
        goToFeedback();
      } else {
        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
    signinprevBtn.addEventListener('click', e => {
      e.preventDefault();

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

      const prevQuestion = questions[progressBar.value - 2];
      const prevBtn = prevQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .previous'
      );
      const nextBtn = prevQuestion.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .next'
      );
      const prevFeedBack = signIn.previousElementSibling;
      const getRightFeedback = prevFeedBack.querySelector('.right-feedback');
      const getWrongFeedback = prevFeedBack.querySelector('.wrong-feedback');

      if (promoType) {
        getRightFeedback.classList.add('hidden');
        getWrongFeedback.classList.add('hidden');
      }

      // at sign in section
      if (allQuestions.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');
        }

        allQuestions.style.minHeight = `${lastQuestion.clientHeight}px`;
        allQuestions.classList.remove('sign-in');
        updateTabIndex(lastQuestion);
        gsap.to(allQuestions, {
          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();
  });

  // Open Question Modal
  startBtn.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('bundle-hidden');

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

    progressBar.value = 1;
    gsap.to(allQuestions, {
      transform: '',
      ease: 'power2',
      scrub: true,
      yoyo: 'true',
    });
    updateTabIndex(allQuestionsItem[0]);
    closeBtns.tabIndex = '0';
    closeBtns.focus();

    if (window.innerWidth < MOBILE_BREAKPOINT) {
      const containerHeight = document.documentElement.clientHeight;
      const allNavigation = parentElement.querySelectorAll(
        '.bundled-learning-promo__questions--list__navigation--up-down'
      );
      const bottomGap = 102;

      allNavigation.forEach(navigation => {
        navigation.style.top = `${containerHeight - bottomGap}px`;
      });
    }
  });

  // 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('bundle-hidden');

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

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

        closeBtns.click();
      } else if (e.shiftKey && e.keyCode === 9) {
        e.preventDefault();
      } else {
        // empty
      }
    });
  }

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

  window.addEventListener('scroll', () => {
    if (window.innerWidth < MOBILE_BREAKPOINT) {
      const containerHeight = document.documentElement.clientHeight;
      const allNavigation = parentElement.querySelectorAll(
        '.bundled-learning-promo__questions--list__navigation--up-down'
      );
      const bottomGap = 102;

      allNavigation.forEach(navigation => {
        navigation.style.top = `${containerHeight - bottomGap}px`;
      });
    }
  });

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

    if (clickedElement.tagName === 'INPUT') {
      const allQuestionsParent = clickedElement.closest(
        '.all-questions__single'
      );
      const bundleLearnPromo = clickedElement.closest(
        '.bundled-learning-promo'
      );

      if (!allQuestionsParent || !bundleLearnPromo) {
        return;
      }

      const alert = allQuestionsParent.querySelector(
        '.all-questions__single--alert'
      );
      const inputs = allQuestionsParent.querySelectorAll('input');
      const parentnextBtn = allQuestionsParent.querySelector(
        '.bundled-learning-promo__questions--list__navigation--up-down .next'
      );
      const parentnextCta = allQuestionsParent.querySelector(
        '.cta.cta--efl.personalisationNext'
      );

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

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

        if (answered === true) {
          allQuestionsParent.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;

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

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

  window.addEventListener('keydown', event => {
    if ((event.keyCode === 13 || event.keyCode === 32) && parentElement) {
      const { target } = event;
      const bundleLearnPromo = target.closest('.bundled-learning-promo');

      if (!bundleLearnPromo) {
        return;
      }

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

  // video functions
  const checkThumbnail = currentEle => {
    const playButton = currentEle.querySelector(
      '.all-questions__video-thumbnail button'
    );
    const thumbnailImg = currentEle.querySelector(
      '.all-questions__video-thumbnail'
    );

    if (playButton.querySelector('img')) {
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector('.all-questions__player').style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'block';
    } else {
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector('.all-questions__player').style.display =
        'block';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
    }
  };

  const onPlayerReady = event => {
    // To capture error on video
    event.target.playVideo();
    event.target.stopVideo();
  };

  const onPlayerError = currentEle => {
    const errorImg = currentEle.querySelector('.all-questions__video-poster');
    const thumbnailImg = currentEle.querySelector(
      '.all-questions__video-thumbnail'
    );

    if (errorImg.querySelector('img')) {
      // eslint-disable-next-line no-param-reassign
      errorImg.style.display = 'block';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector('.all-questions__player').style.display = 'none';
    } else {
      // eslint-disable-next-line no-param-reassign
      errorImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector('.all-questions__player').style.display =
        'block';
    }
  };

  const onPlayerStateChange = (event, currentEle) => {
    if (event.data === 0) {
      checkThumbnail(currentEle);
    }
  };

  const initVimeoPlayer = (videoPlayerId, videoId, currentEle) => {
    const playButton = currentEle.querySelector(
      '.all-questions__video-thumbnail button'
    );
    const thumbnailImg = currentEle.querySelector(
      '.all-questions__video-thumbnail'
    );
    const videoPlayer = new Player(videoPlayerId, {
      id: videoId,
      autoplay: 0,
      muted: 0,
      title: 0,
      sidedock: 0,
      controls: 1,
    });

    videoPlayer
      .pause()
      .then(() => {
        // The video is loadded
      })
      .catch(() => {
        onPlayerError(currentEle);
      });

    videoPlayer.on('ended', () => {
      checkThumbnail(currentEle);
    });

    playButton.addEventListener('click', () => {
      videoPlayer.play();
      // eslint-disable-next-line no-param-reassign
      thumbnailImg.style.display = 'none';
      // eslint-disable-next-line no-param-reassign
      currentEle.querySelector('.all-questions__player').style.display =
        'block';
    });

    playButton.addEventListener('keyup', event => {
      if (event.keyCode === 13) {
        // Cancel the default action, if needed
        event.preventDefault();
        playButton.click();
      }
    });

    checkThumbnail(currentEle);
  };

  const initYTPlayer = (videoPlayerId, videoId, currentEle) => {
    return new window.YT.Player(videoPlayerId, {
      height: '390',
      width: '640',
      videoId,
      playsinline: 1,
      events: {
        onReady: onPlayerReady,
        onStateChange: event => {
          onPlayerStateChange(event, currentEle);
        },
        onError: () => {
          onPlayerError(currentEle);
        },
      },
    });
  };

  const initVideo = () => {
    questionVideo.forEach(currentEle => {
      const videoWrap = currentEle.querySelector('.all-questions__video-wrap');
      const videoPlayerId = currentEle
        .querySelector('.all-questions__player')
        .getAttribute('id');
      const { videoId, videoType } = videoWrap.dataset;
      const playButton = currentEle.querySelector(
        '.all-questions__video-thumbnail button'
      );
      const thumbnailImg = currentEle.querySelector(
        '.all-questions__video-thumbnail'
      );

      if (videoType === 'youtube') {
        const player = initYTPlayer(videoPlayerId, videoId, currentEle);

        playButton.addEventListener('click', () => {
          player.playVideo();
          // eslint-disable-next-line no-param-reassign
          thumbnailImg.style.display = 'none';
          // eslint-disable-next-line no-param-reassign
          currentEle.querySelector('.all-questions__player').style.display =
            'block';
        });

        playButton.addEventListener('keyup', event => {
          if (event.keyCode === 13) {
            // Cancel the default action, if needed
            event.preventDefault();
            playButton.click();
          }
        });

        checkThumbnail(currentEle);
      }
    });
    window.YouTubeIframeApiReady = true;
  };

  const initYTApi = () => {
    if (window.YouTubeIframeApiReady === undefined) {
      loadYouTubeApi();
      window.onYouTubeIframeAPIReady = () => {
        initVideo();
      };
      const autoplayYT = document.querySelector(
        '[data-behavior=autoplay-hero-video]'
      );
      const largevideoYT = document.querySelector(
        '[data-behavior=efl-large-video-player]'
      );
      const largevideoType = document.querySelector(
        '.efl-large-video-player__video-wrap'
      );

      if (
        autoplayYT &&
        autoplayYT.getAttribute('data-video-type') === 'youtube'
      ) {
        const autoplayTime = setInterval(() => {
          if (window.YouTubeIframeApiReady === true) {
            initVideo();
            clearInterval(autoplayTime);
          }
        }, 100);
      } else if (
        largevideoYT &&
        largevideoType &&
        largevideoType.getAttribute('data-video-type') === 'youtube'
      ) {
        const largevideoTime = setInterval(() => {
          if (window.YouTubeIframeApiReady === true) {
            initVideo();
            clearInterval(largevideoTime);
          }
        }, 100);
      }
    } else if (window.YouTubeIframeApiReady === false) {
      window.onYouTubeIframeAPIReady = () => {
        initVideo();
      };
    } else {
      initVideo();
    }
  };

  let youtubeVid = false;

  // check all video questions
  questionVideo.forEach((currentEle, index) => {
    const videoWrap = currentEle.querySelector('.all-questions__video-wrap');
    const tempVideoPlayerId = currentEle
      .querySelector('.all-questions__player')
      .getAttribute('id');

    // dynamic video player id update
    currentEle
      .querySelector('.all-questions__player')
      .setAttribute('id', `${tempVideoPlayerId}-${index}`);

    const videoPlayerId = currentEle
      .querySelector('.all-questions__player')
      .getAttribute('id');

    const { videoId, videoType } = videoWrap.dataset;

    if (videoType === 'youtube') {
      youtubeVid = true;
    } else {
      initVimeoPlayer(videoPlayerId, videoId, currentEle);
    }

    if (youtubeVid) {
      initYTApi();
    }
  });

  updateTabIndex();
};