Registration Junior Last Step

/* eslint-disable no-param-reassign */
/* eslint-disable compat/compat */
import { hideClass } from '../../registration-error/registration-error';
import {
  cloneElement,
  currentPage,
  localdate,
  newJunior,
  onComponentVisible,
  showBackBtn,
  showStep,
} from '../../registrationUtility';
import {
  showServerError,
  hideServerError,
} from '../../registration-server-error/registration-server-error';
import { juniorMembershipPath, POST } from '../../service';
import Validator from '../../validation';

export default (currentElement, addingJunior, addRelation, juniorDetails) => {
  const clearForm = () => {
    addRelation.querySelectorAll('input').forEach(element => {
      element.checked = false;
    });

    juniorDetails.querySelectorAll('input').forEach(element => {
      element.value = '';
    });
  };
  const nextBtnClickHandler = async (event, nextBtn) => {
    event.preventDefault();
    const [
      firstNameElement,
      surNameElement,
      dateOfBirthElement,
    ] = juniorDetails.querySelectorAll(
      '.registration-junior-details__first-name input, .registration-junior-details__surname input, .DateOfBirth input'
    );

    if (nextBtn.classList.contains('cta--r-primary')) {
      const [inContainer, infoTemplate] = addingJunior.querySelectorAll(
        '.detail, .info-template'
      );
      const response = await POST(juniorMembershipPath, {
        ...newJunior,
        FirstName: firstNameElement.value,
        LastName: surNameElement.value,
        DateOfBirth: dateOfBirthElement.value,
      });

      if (response.success) {
        const newUser = cloneElement(infoTemplate);

        newUser.classList.add('info');
        const [infoKey, infoValue] = newUser.querySelectorAll(
          '.info__key, .info__value'
        );
        const { fullName, dob } = response.junior;

        infoKey.innerText = `${fullName}`;

        if (dob) {
          infoValue.innerText = `${infoValue.innerText} ${localdate(
            new Date(dob)
          )}`;
        }
        inContainer.appendChild(newUser);
        clearForm();
        currentElement.classList.add(hideClass);
        addingJunior.classList.remove(hideClass);
      } else {
        showServerError(currentElement, response.error);
      }
    }
  };

  const checkboxChangeHandler = (event, btn) => {
    const { checked } = event.target;

    Validator.swaapBtn(btn, checked);
  };

  let controller = new AbortController();

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

    const [checkbox, btn] = currentElement.querySelectorAll(
      '.registration-junior-last-step__checkbox input, .registration-junior-last-step__next a'
    );

    btn.addEventListener('click', e => nextBtnClickHandler(e, btn), {
      signal: controller.signal,
    });
    checkbox.addEventListener(
      'change',
      event => checkboxChangeHandler(event, btn),
      { signal: controller.signal }
    );
  });
};