Registration Select Junior

/* eslint-disable compat/compat */
import {
  cloneElement,
  currentPage,
  hideStep,
  nevigateToNext,
  onComponentVisible,
  setText,
} from '../../registrationUtility';
import Validator from '../../validation';
import registrationUploadPassport from '../registration-upload-passport/registration-upload-passport';
import registrationPassportDetails from '../registration-passport-details/registration-passport-details';
// eslint-disable-next-line import/no-named-as-default, import/no-named-as-default-member
import registrationUploadProfile from '../registration-upload-profile/registration-upload-profile';

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

  const getSelectedJuniors = checkboxes => {
    const selectJuniors = [];

    checkboxes.forEach(checkBox => {
      if (checkBox.checked) {
        selectJuniors.push({
          name: checkBox.getAttribute('data-name'),
          fan: checkBox.getAttribute('data-fan'),
          individualid: checkBox.getAttribute('data-individual-id'),
        });
      }
    });
    currentPage.selectJuniors = selectJuniors;
    return selectJuniors;
  };

  const checBoxCheckHandler = (checkboxes, nextBtn) => {
    const selectedJuniors = getSelectedJuniors(checkboxes);

    Validator.swaapBtn(nextBtn, selectedJuniors.length);
  };

  const selectAllClickHandler = (event, checkboxes, nextBtn) => {
    event.preventDefault();
    checkboxes.forEach(checkbox => {
      // eslint-disable-next-line no-param-reassign
      checkbox.checked = true;
    });
    checBoxCheckHandler(checkboxes, nextBtn);
  };

  const removePreviousNodes = parentNode => {
    const { children } = parentNode;

    for (let index = 1; index < children.length; index++) {
      children[index].classList.add('registration_skip');
    }
  };

  const modifyElement = (clonedElement, elementSelector, fan) => {
    const modifiedElement = clonedElement;

    const [
      titleElement,
      subTitleElement,
      selectedElement,
    ] = modifiedElement.querySelectorAll(
      `.registration-form-title, .registration-form-sub-title, ${elementSelector}`
    );

    if (
      modifiedElement.classList.contains('registration-passport-details-cloned')
    ) {
      setText(subTitleElement, `${subTitleElement.innerText} ${fan.name}`);
    } else {
      setText(titleElement, `${titleElement.innerText} ${fan.name}`);
    }

    selectedElement.setAttribute('data-fan', fan.fan);
    selectedElement.setAttribute('data-individual-id', fan.individualid);

    return modifiedElement;
  };

  const generateNodes = (parentElement, juniors) => {
    const registrationContainer = parentElement;
    const components = [];
    const [
      uploadPassport,
      passportDetails,
      uploadProfile,
    ] = registrationContainer.querySelectorAll(
      '.registration-upload-passport, .registration-passport-details, .registration-upload-profile'
    );

    juniors.forEach(fan => {
      components.push(
        modifyElement(
          cloneElement(uploadPassport, true),
          '.registration-upload-passport__upload-passport-photo .cta',
          fan
        )
      );
      components.push(
        modifyElement(
          cloneElement(passportDetails, true),
          '.next-to-step-5 .cta',
          fan
        )
      );
      components.push(
        modifyElement(
          cloneElement(uploadProfile, true),
          '.registration-upload-profile__next_btn .cta',
          fan
        )
      );
    });

    return components;
  };

  const nextBtnClickHandler = (event, currElement, juniors) => {
    const { parentElement } = currElement;

    event.preventDefault();
    if (event.target.classList.contains('cta--r-primary')) {
      removePreviousNodes(parentElement);
      const newNodes = generateNodes(parentElement, juniors);

      newNodes.forEach(node => {
        parentElement.appendChild(node);
      });

      const uploadPassport = currentElement.parentElement.querySelectorAll(
        '.registration-upload-passport-cloned'
      );
      const passportDetails = currentElement.parentElement.querySelectorAll(
        '.registration-passport-details-cloned'
      );
      const uploadProfile = currentElement.parentElement.querySelectorAll(
        '.registration-upload-profile-cloned'
      );

      uploadPassport.forEach(element => {
        registrationUploadPassport(element, element.nextElementSibling);
      });

      passportDetails.forEach(element => {
        registrationPassportDetails(element);
      });

      uploadProfile.forEach(element => {
        registrationUploadProfile(element);
      });

      nevigateToNext(currentElement);
    }
  };

  onComponentVisible(currentElement, () => {
    hideStep();
    currentPage.page = currentElement;
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    const selectAll = currentElement.querySelector(
      '.registration-select-junior__selectAll'
    );
    const checkboxes = currentElement.querySelectorAll('input');
    const nextBtn = currentElement.querySelector(
      '.registration-select-junior__next a'
    );

    // removePreviousNodes(currentElement.parentElement);
    checBoxCheckHandler(checkboxes, nextBtn);

    selectAll.addEventListener(
      'click',
      event => selectAllClickHandler(event, checkboxes, nextBtn),
      { signal: controller.signal }
    );

    nextBtn.addEventListener(
      'click',
      event =>
        nextBtnClickHandler(
          event,
          currentElement,
          getSelectedJuniors(checkboxes)
        ),
      {
        signal: controller.signal,
      }
    );

    checkboxes.forEach(checkBox => {
      checkBox.addEventListener(
        'change',
        () => checBoxCheckHandler(checkboxes, nextBtn),
        { signal: controller.signal }
      );
    });
  });
};