Efl Survey: Page Notification

import { gsap } from 'gsap';
import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
import { Rive, Fit, Layout } from '@rive-app/canvas';
import { findPos } from '../efl-filter-bar/efl-filter-bar';

export default parentElement => {
  const surveyUsefulYesCta = parentElement.querySelector('.survey-useful-yes');
  const surveyUsefulNoCta = parentElement.querySelector('.survey-useful-no');
  const surveyPractiseYesCta = parentElement.querySelector(
    '.survey-practise-yes'
  );
  const surveyPractiseNoCta = parentElement.querySelector(
    '.survey-practise-no'
  );
  const surveyNotNeededCta = parentElement.querySelector('.survey-not-needed');
  const surveyComplicatedCta = parentElement.querySelector(
    '.survey-complicated'
  );
  const surveyNotUsefulCta = parentElement.querySelector('.survey-not-useful');
  const surveyOtherReasonCta = parentElement.querySelector(
    '.survey-other-reason'
  );
  const surveySubmitReasonCta = parentElement.querySelector(
    '.survey-submit-reason'
  );
  const textArea = parentElement.querySelector('textarea');
  const characterCount = parentElement.querySelector('.character-count');
  const surveClearTextCta = parentElement.querySelector('.clear-text');
  const closeBtn = parentElement.querySelector('.efl-survey__close');
  const quizNotification = parentElement.classList.contains(
    'efl-survey--page-notification'
  );
  const surveyHeading = parentElement.querySelector('.heading');
  const bundleQuiz = document.querySelector('.bundled-learning-promo.quiz');
  const { fanid, surveyPageId } = parentElement.dataset;
  let surveyData;
  const questionJson = [];
  // Rive
  const surveyCanvas = parentElement.querySelector('#efl-survey__header--icon');
  const lyout = new Layout({
    fit: Fit.Cover,
  });
  const MOBILE_BREAKPOINT = 820;

  gsap.registerPlugin(ScrollToPlugin);

  async function updateSurveyDetailsCallback() {
    const url = `/Personalise/UpdateUserSurvey`;

    // 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: surveyData,
    });

    return response.json();
  }

  function updateSurveyDetails() {
    try {
      // isAjaxRuning = true;
      updateSurveyDetailsCallback().then(response => {
        if (response) {
          console.log(response);
        }
      });
    } catch (e) {
      throw new Error('Unable to update survey details ::', e);
    }
  }

  const swithScreen = screen => {
    const allSteps = parentElement.querySelectorAll(
      '.efl-survey__questions--steps'
    );
    const activeStep = parentElement.querySelector(`.${screen}`);

    allSteps.forEach(steps => {
      steps.classList.add('hidden');
    });
    activeStep.classList.remove('hidden');

    surveyData = `{
      "id": "${fanid}",
      "surveyPages": [{
        "surveyPageId": "${surveyPageId}",
        "questions": ${JSON.stringify(questionJson)}
      }]
    }`;
  };

  const firstStepJson = e => {
    const { questionId } = e.target.closest(
      '.efl-survey__questions--steps'
    ).dataset;
    const { answerId } = e.target.dataset;
    const answer = e.target.innerText;

    const question = `{
      "questionId": "${questionId}",
      "answerId": "${answerId}",
      "answer": "${answer}"
    }`;

    questionJson[0] = JSON.parse(question);
  };

  const secondStepJson = e => {
    const { questionId } = e.target.closest(
      '.efl-survey__questions--steps'
    ).dataset;
    const { answerId } = e.target.dataset;
    const answer = e.target.innerText;

    const question = `{
      "questionId": "${questionId}",
      "answerId": "${answerId}",
      "answer": "${answer}"
    }`;

    questionJson[1] = JSON.parse(question);
  };

  const otherReasonJson = () => {
    const { questionId } = surveyOtherReasonCta.closest(
      '.efl-survey__questions--steps'
    ).dataset;
    const { answerId } = surveyOtherReasonCta.dataset;
    const answer = textArea.value;

    const question = `{
      "questionId": "${questionId}",
      "answerId": "${answerId}",
      "answer": "${answer}"
    }`;

    questionJson[1] = JSON.parse(question);
  };

  const linkScrollTo = e => {
    if (bundleQuiz) {
      if (window.innerWidth <= MOBILE_BREAKPOINT) {
        e.preventDefault();

        const jumpTo = document.querySelector('.jump-to-section');
        const jumpToHeader = document.querySelector('.jump-to-section--header');
        const quizPos = findPos(bundleQuiz);
        const offsetVal = 310;

        if (jumpTo.ariaExpanded === 'true') {
          gsap.to(window, {
            duration: 5,
            scrollTo: {
              y:
                quizPos -
                offsetVal -
                jumpToHeader.offsetHeight +
                jumpTo.offsetHeight,
            },
            ease: 'power2',
          });
        } else {
          gsap.to(window, {
            duration: 5,
            scrollTo: { y: quizPos - offsetVal - jumpToHeader.offsetHeight },
            ease: 'power2',
          });
        }
      } else {
        gsap.to(window, {
          duration: 5,
          scrollTo: { y: bundleQuiz.offsetTop },
          ease: 'power2',
        });
      }
    }
  };

  closeBtn.addEventListener('click', e => {
    e.preventDefault();
    parentElement.classList.add('hidden');
  });

  if (!quizNotification) {
    const riveAnimation = new Rive({
      src: '/assets/example-content/efl-survey.riv',
      canvas: surveyCanvas,
      layout: lyout,
      onLoad: () => {
        riveAnimation.resizeDrawingSurfaceToCanvas();
      },
    });

    riveAnimation.play('Survey load');
    riveAnimation.play('Survey pulse');

    surveySubmitReasonCta.setAttribute('aria-disabled', 'true');
    characterCount.innerHTML = textArea.value.length;

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

      firstStepJson(e);
      swithScreen('step2');
    });
    surveyPractiseYesCta.addEventListener('click', e => {
      e.preventDefault();

      secondStepJson(e);
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Survey load');
      riveAnimation.stop('Survey pulse');
      riveAnimation.play('Complete');
      riveAnimation.play('Complete loop');
    });
    surveyPractiseNoCta.addEventListener('click', e => {
      e.preventDefault();

      secondStepJson(e);
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Survey load');
      riveAnimation.stop('Survey pulse');
      riveAnimation.play('Complete');
      riveAnimation.play('Complete loop');
    });
    surveyUsefulNoCta.addEventListener('click', e => {
      e.preventDefault();

      firstStepJson(e);
      swithScreen('step4');
      riveAnimation.stop('Survey load');
      riveAnimation.stop('Survey pulse');
      riveAnimation.play('Negative');
      riveAnimation.play('Negative pulse');
    });
    surveyNotNeededCta.addEventListener('click', e => {
      e.preventDefault();

      secondStepJson(e);
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Negative');
      riveAnimation.stop('Negative pulse');
      riveAnimation.play('Complete red');
      riveAnimation.play('Complete loop red');
    });
    surveyComplicatedCta.addEventListener('click', e => {
      e.preventDefault();

      secondStepJson(e);
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Negative');
      riveAnimation.stop('Negative pulse');
      riveAnimation.play('Complete red');
      riveAnimation.play('Complete loop red');
    });
    surveyNotUsefulCta.addEventListener('click', e => {
      e.preventDefault();

      secondStepJson(e);
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Negative');
      riveAnimation.stop('Negative pulse');
      riveAnimation.play('Complete red');
      riveAnimation.play('Complete loop red');
    });
    surveyOtherReasonCta.addEventListener('click', e => {
      e.preventDefault();
      swithScreen('step5');
    });
    surveClearTextCta.addEventListener('click', e => {
      e.preventDefault();
      textArea.value = '';
      characterCount.innerHTML = '0';
      surveySubmitReasonCta.setAttribute('aria-disabled', 'true');
    });
    textArea.addEventListener('keyup', e => {
      characterCount.innerHTML = e.target.value.length;
      // Disable button on empty text
      if (e.target.value.length > 0) {
        surveySubmitReasonCta.setAttribute('aria-disabled', 'false');
      } else {
        surveySubmitReasonCta.setAttribute('aria-disabled', 'true');
      }
    });
    surveySubmitReasonCta.addEventListener('click', e => {
      e.preventDefault();

      otherReasonJson();
      swithScreen('step3');
      updateSurveyDetails();
      riveAnimation.stop('Negative');
      riveAnimation.stop('Negative pulse');
      riveAnimation.play('Complete red');
      riveAnimation.play('Complete loop red');
    });
  } else {
    const notificationAnimation = new Rive({
      src: '/assets/example-content/quiz_notification.riv',
      canvas: surveyCanvas,
      layout: lyout,
      onLoad: () => {
        notificationAnimation.resizeDrawingSurfaceToCanvas();
      },
    });

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

    const activeStep = parentElement.querySelector('.step1');

    if (activeStep.classList.contains('hidden')) {
      completeAnimation.play('Loop');
    } else {
      notificationAnimation.play('Active');
    }

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

      if (!bundleQuiz) {
        return;
      }

      linkScrollTo(e);
    });
  }
};