Registration Terms And Condition

/* eslint-disable compat/compat */
/* eslint-disable operator-linebreak */
import Validator from '../../validation';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  POST,
  termsAndConditionPayload,
  termsAndConditionPath,
  getAuth,
} from '../../service';
import {
  currentPage,
  nevigateToNext,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import { hideClass } from '../../registration-error/registration-error';

export default (currentElement, juniorFlow) => {
  let controller = new AbortController();

  const checkBosex = {
    ESTCChecked: false,
    YouthESTCChecked: false,
  };

  const callApi = async () => {
    const res = await POST(termsAndConditionPath, {
      ...termsAndConditionPayload,
      ...checkBosex,
      fanCode: getAuth().fanCode,
      youthIndividualIds: currentPage.selectJuniors.map(x => x.individualid),
    });

    if (res.success) {
      hideServerError(currentElement);
      sessionStorage.setItem(
        'orderResponse',
        JSON.stringify(res.orderResponse)
      );
      nevigateToNext(currentElement);
    } else {
      showServerError(currentElement, res.error);
    }
  };

  const nextClickHandler = async event => {
    event.preventDefault();
    const { target } = event;

    if (target.classList.contains('cta--r-primary')) {
      if (currentPage.selectJuniors.length === 0) {
        await callApi();
      } else if (checkBosex.ESTCChecked && checkBosex.YouthESTCChecked) {
        await callApi();
      } else {
        showServerError(
          currentElement,
          target.parentElement.getAttribute('data-error-message')
        );
      }
    }
  };

  const checkboxChangeHandler = (
    nextBtn,
    removeNadContinue,
    checkBoxes,
    errorContainer
  ) => {
    errorContainer.classList.add(hideClass);
    removeNadContinue.classList.add(hideClass);
    nextBtn.classList.remove(hideClass);

    checkBoxes.forEach(checkbox => {
      checkBosex[checkbox.name] = checkbox.checked;
    });

    const { ESTCChecked, YouthESTCChecked } = checkBosex;

    if (ESTCChecked && YouthESTCChecked) {
      Validator.swaapBtn(nextBtn, true);
    } else if (!ESTCChecked && !YouthESTCChecked) {
      Validator.swaapBtn(nextBtn, false);
    } else if (ESTCChecked || YouthESTCChecked) {
      errorContainer.classList.remove(hideClass);
      errorContainer.lastElementChild.classList.add(hideClass);
      errorContainer.firstElementChild.classList.add(hideClass);
      if (ESTCChecked) {
        if (currentPage.selectJuniors.length === 0) {
          removeNadContinue.classList.add(hideClass);
          nextBtn.classList.remove(hideClass);
          Validator.swaapBtn(nextBtn, true);
        } else {
          removeNadContinue.classList.remove(hideClass);
          nextBtn.classList.add(hideClass);
          errorContainer.lastElementChild.classList.remove(hideClass);
        }
      } else {
        removeNadContinue.classList.add(hideClass);
        nextBtn.classList.remove(hideClass);
        Validator.swaapBtn(nextBtn, false);
        errorContainer.firstElementChild.classList.remove(hideClass);
      }
    }
  };

  const removeNadContinueHandler = async event => {
    event.preventDefault();
    checkBosex.YouthESTCChecked = false;
    currentPage.selectJuniors = [];
    await callApi();
    juniorFlow.classList.add('registration_skip');
  };

  onComponentVisible(currentElement, () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    hideServerError(currentElement);
    showStep('06');
    currentPage.page = currentElement;

    const [, ...juniorCheckBox] = currentElement.querySelectorAll(
      '.registration-terms-container .checkbox-container label'
    );

    const errorContainer = currentElement.querySelector(
      '.registration-error-container'
    );

    juniorCheckBox.forEach(element => {
      element.classList.add(hideClass);
    });

    if (currentPage.selectJuniors.length > 0) {
      juniorCheckBox.forEach(element => {
        element.classList.remove(hideClass);
      });
    }

    const Checkboxes = currentElement.querySelectorAll(
      '.registration-terms-container .checkbox-container label:not(.registration_hide) input[type=checkbox]'
    );
    const nextBtn = currentElement.querySelector(
      '.registration-terms-and-condition__next a'
    );

    const removeNadContinue = currentElement.querySelector(
      '.registration-terms-and-condition__remove_junior_and_continue a'
    );

    if (currentPage.selectJuniors.length > 0 && currentPage.adultMemberShip) {
      removeNadContinue.parentElement.classList.remove(hideClass);
    } else {
      removeNadContinue.parentElement.classList.add(hideClass);
    }

    checkboxChangeHandler(
      nextBtn,
      removeNadContinue,
      Checkboxes,
      errorContainer
    );

    nextBtn.addEventListener('click', nextClickHandler, {
      signal: controller.signal,
    });

    removeNadContinue.addEventListener('click', removeNadContinueHandler, {
      signal: controller.signal,
    });

    Checkboxes.forEach(checkbox => {
      checkbox.addEventListener(
        'change',
        () =>
          checkboxChangeHandler(
            nextBtn,
            removeNadContinue,
            Checkboxes,
            errorContainer
          ),
        {
          signal: controller.signal,
        }
      );
    });
  });
};