Registration Sign And Declaration

import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  currentPage,
  nevigateToNext,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import {
  POST,
  signAndDeclarationPath,
  signAndDeclarationPayload,
} from '../../service';

export default currentElement => {
  const containerCheckboxes1 = document.querySelectorAll(
    `.registration-checkbox-container1 input[type="checkbox"]`
  );
  const containerCheckboxes2 = document.querySelectorAll(
    '.registration-checkbox-container2 input[type="checkbox"]'
  );

  if (containerCheckboxes1.length >= 2) {
    containerCheckboxes1[0].id = 'yesCheckbox1';
    containerCheckboxes1[1].id = 'noCheckbox1';
  }

  if (containerCheckboxes2.length >= 2) {
    containerCheckboxes2[0].id = 'yesCheckbox2';
    containerCheckboxes2[1].id = 'noCheckbox2';
  }

  onComponentVisible(currentElement, () => {
    hideServerError(currentElement);
    currentPage.page = currentElement;
    showStep('07');
  });

  const yesCheckboxOne = document.querySelector(
    '.registration-checkbox-container1 input[id="yesCheckbox1"]'
  );
  // eslint-disable-next-line no-unused-vars
  const noCheckboxOne = document.querySelector(
    '.registration-checkbox-container1 input[id="noCheckbox1"]'
  );
  const yesCheckboxTwo = document.querySelector(
    '.registration-checkbox-container2 input[id="yesCheckbox2"]'
  );
  // eslint-disable-next-line no-unused-vars
  const noCheckboxTwo = document.querySelector(
    '.registration-checkbox-container2 input[id="noCheckbox2"]'
  );

  const applyCheckboxBehaviour = (containerSelector, nextButtonSelector) => {
    const checkboxes = document.querySelectorAll(
      `${containerSelector} input[type="checkbox"]`
    );

    const swapBtn = () => {
      const container1Checkboxes = document.querySelectorAll(
        `.registration-checkbox-container1 input[type="checkbox"]`
      );
      const container2Checkboxes = document.querySelectorAll(
        '.registration-checkbox-container2 input[type="checkbox"]'
      );
      const isAnyCheckedInContainer1 = Array.from(container1Checkboxes).some(
        checkbox => checkbox.checked
      );
      const isAnyCheckedInContainer2 = Array.from(container2Checkboxes).some(
        checkbox => checkbox.checked
      );
      const targetElement = document.querySelector(nextButtonSelector);

      if (targetElement) {
        if (isAnyCheckedInContainer1 && isAnyCheckedInContainer2) {
          targetElement.classList.add('cta--r-primary');
          targetElement.classList.remove('cta--r-disabled');
        } else {
          targetElement.classList.remove('cta--r-primary');
          targetElement.classList.add('cta--r-disabled');
        }
      }
    };

    checkboxes.forEach(checkbox => {
      checkbox.addEventListener('change', event => {
        if (event.target.checked) {
          checkboxes.forEach(cb => {
            if (cb !== event.target) {
              // eslint-disable-next-line no-param-reassign
              cb.checked = false;
            }
          });
        }
        swapBtn();
      });
    });
    swapBtn();
  };

  const nextBtn = currentElement.querySelector(
    '.registration-sign-and-declaration__next .cta'
  );

  if (nextBtn) {
    nextBtn.addEventListener(
      'click',
      async event => {
        event.preventDefault();
        if (nextBtn.classList.contains('cta--r-primary')) {
          const res = await POST(signAndDeclarationPath, {
            ...signAndDeclarationPayload,
            Convicted: yesCheckboxOne.checked,
            Banned: yesCheckboxTwo.checked,
          });

          if (res.success) {
            nevigateToNext(currentElement);
          } else {
            showServerError(currentElement, res.error);
          }
        }
      },
      false
    );
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
      applyCheckboxBehaviour(
        '.registration-checkbox-container1',
        '.registration-sign-and-declaration__next .cta--r-primary, .registration-sign-and-declaration__next .cta--r-disabled'
      );
      applyCheckboxBehaviour(
        '.registration-checkbox-container2',
        '.registration-sign-and-declaration__next .cta--r-primary, .registration-sign-and-declaration__next .cta--r-disabled'
      );
    });
  } else {
    applyCheckboxBehaviour(
      '.registration-checkbox-container1',
      '.registration-sign-and-declaration__next .cta--r-primary, .registration-sign-and-declaration__next .cta--r-disabled'
    );
    applyCheckboxBehaviour(
      '.registration-checkbox-container2',
      '.registration-sign-and-declaration__next .cta--r-primary, .registration-sign-and-declaration__next .cta--r-disabled'
    );
  }
};