Registration Passport Details

/* eslint-disable operator-linebreak */
/* eslint-disable compat/compat */
import {
  hideAllError,
  showError,
} from '../../registration-error/registration-error';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  NEWPASSPORT,
  currentPage,
  hideStep,
  nevigateToNext,
  nevigateToPrevious,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';
import {
  GET,
  POST,
  getAuth,
  getPassportDetailsPath,
  passportDetailPath,
  passportDetailsPayload,
} from '../../service';
import Validator from '../../validation';

export default currentElement => {
  let controller = new AbortController();
  const untouched = 'untouched-element';

  const nextElementClickHandler = async (
    event,
    nextBtn,
    placeOfBirthElement,
    passportNumberhElement,
    passportExpiryElement,
    nationalityElement
  ) => {
    event.preventDefault();
    if (nextBtn.classList.contains('cta--r-primary')) {
      const res = await POST(passportDetailPath, {
        ...passportDetailsPayload,
        JuniorFancode: !!nextBtn.getAttribute('data-fan'),
        FanCode: nextBtn.getAttribute('data-fan')
          ? nextBtn.getAttribute('data-fan')
          : getAuth().fanCode,
        PlaceOfBirth: placeOfBirthElement.value,
        PassportExpiry: passportExpiryElement.value,
        PassportNo: passportNumberhElement.value,
        Nationality: nationalityElement.value,
      });

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

  const uoploadNewPhotoElementClickHandler = event => {
    event.preventDefault();
    sessionStorage.setItem(NEWPASSPORT, true);
    nevigateToPrevious(currentElement);
  };

  const keydownEventHandler = event => {
    const { key, target } = event;
    const { id } = target;

    switch (id) {
      case 'placeOfBirth':
        if (!Validator.isAlphabets(key, [' '])) {
          event.preventDefault();
        }
        break;
      case 'passportNumber':
        if (!Validator.isAlphaNumeric(event.key)) {
          event.preventDefault();
        }
        break;
      default:
        break;
    }
  };

  const isplaceOfBirthValid = (value, maxlength) =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.alphabetsOnly(value, ' '),
      () => Validator.between(value, 1, maxlength),
    ]);

  const isPassportNumberValid = value =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.alphaNumeric(value),
      () => Validator.between(value, 6, 10),
    ]);

  const isPassportExpiryValid = (value, minDate, maxDate) =>
    Validator.validate([
      () => Validator.required(value),
      () => Validator.dateUnderflow(value, minDate),
      () => Validator.dateOverflow(value, maxDate),
    ]);

  const isNationalityValid = value =>
    Validator.validate([
      () => Validator.required(value === 'select' ? '' : value),
    ]);

  const isFormValid = (
    placeOfBirth,
    placeOfBirthMaxlen,
    passportNumber,
    expiryDate,
    Nationality,
    minDate,
    maxDate
  ) =>
    !isplaceOfBirthValid(placeOfBirth, placeOfBirthMaxlen) &&
    !isPassportNumberValid(passportNumber) &&
    !isPassportExpiryValid(expiryDate, minDate, maxDate) &&
    !isNationalityValid(Nationality);

  const elementInputHandler = (
    nextButton,
    placeOfBirth,
    passportNumber,
    expiryDate,
    Nationality
  ) => {
    const isValid = isFormValid(
      placeOfBirth.value,
      placeOfBirth.dataset.maxlength,
      passportNumber.value,
      expiryDate.value,
      Nationality.value,
      expiryDate.dataset.min,
      expiryDate.dataset.max
    );

    Validator.swaapBtn(nextButton, isValid);
  };

  const togglePlaceholder = (element, boolVal) => {
    const parentEle = element.parentElement.parentElement;

    if (boolVal) {
      parentEle.classList.remove(untouched);
    } else {
      parentEle.classList.add(untouched);
    }
  };

  const inputPickerFieldHandler = event => {
    const { target } = event;
    const { value } = target;

    togglePlaceholder(target, value && value !== 'select');
  };

  const passportExpiryFocusHandler = event => {
    togglePlaceholder(event.target, true);
  };

  const elementBlurHandler = event => {
    event.preventDefault();
    const thisNode = event.target;
    const { id, value, dataset } = thisNode;
    let errorMessage;

    hideAllError(thisNode.parentElement);
    switch (id) {
      case 'placeOfBirth':
        errorMessage = isplaceOfBirthValid(value, thisNode.dataset.maxlength);
        break;
      case 'passportNumber':
        errorMessage = isPassportNumberValid(value);
        break;
      case 'passportExpiry':
        errorMessage = isPassportExpiryValid(value, dataset.min, dataset.max);
        // eslint-disable-next-line no-param-reassign
        currentElement.querySelector(`#${event.target.id}`).value = value;
        togglePlaceholder(thisNode, value);
        break;
      case 'nationality':
        errorMessage = isNationalityValid(value);
        break;
      default:
        break;
    }
    if (errorMessage) {
      showError(thisNode.parentElement, errorMessage);
    }
  };

  onComponentVisible(currentElement, async () => {
    const isChildComponent = currentElement.classList.contains(
      'registration-passport-details-cloned'
    );

    currentPage.page = currentElement;
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    showStep('03');
    const [
      placeOfBirthElement,
      passportNumberhElement,
      passportExpiryElement,
      nationalityElement,
      nextElement,
      uoploadNewPhotoElement,
    ] = currentElement.querySelectorAll(
      '#placeOfBirth, #passportNumber, #passportExpiry, #nationality, #nextBtn, #uploadNewPhoto'
    );

    // fixing the image renderer
    const image = currentElement.querySelector('.passport img');

    image.setAttribute('src', image.getAttribute('data-img'));
    image.addEventListener('load', () => {
      placeOfBirthElement.focus();
      setTimeout(() => {
        image.style.webkitTransform = 'scale(1)';
      }, 200);
    });

    if (isChildComponent) {
      hideStep();
      const personalDetailRes = await GET(
        getPassportDetailsPath(nextElement.getAttribute('data-fan'))
      );

      if (personalDetailRes.success) {
        placeOfBirthElement.value = personalDetailRes.passport.placeOfBirth;
        passportNumberhElement.value = personalDetailRes.passport.passportNo;
        passportExpiryElement.value = personalDetailRes.passport.passportExpiry;
        nationalityElement.value = personalDetailRes.passport.nationality
          ? personalDetailRes.passport.nationality
          : 'select';
      }
    }
    hideServerError(currentElement);

    togglePlaceholder(passportExpiryElement, passportExpiryElement.value);
    togglePlaceholder(
      nationalityElement,
      nationalityElement.value && nationalityElement.value !== 'select'
    );

    Validator.swaapBtn(
      nextElement,
      isFormValid(
        placeOfBirthElement.value,
        placeOfBirthElement.dataset.maxlength,
        passportNumberhElement.value,
        passportExpiryElement.value,
        nationalityElement.value,
        passportExpiryElement.dataset.min,
        passportExpiryElement.dataset.max
      )
    );

    const textFields = [placeOfBirthElement, passportNumberhElement];
    const pickerField = [nationalityElement];
    const inputElements = [
      passportExpiryElement,
      ...textFields,
      ...pickerField,
    ];

    passportExpiryElement.addEventListener(
      'focus',
      passportExpiryFocusHandler,
      {
        signal: controller.signal,
      }
    );

    inputElements.forEach(element => {
      element.addEventListener('blur', elementBlurHandler, {
        signal: controller.signal,
      });

      element.addEventListener(
        'input',
        () =>
          elementInputHandler(
            nextElement,
            placeOfBirthElement,
            passportNumberhElement,
            passportExpiryElement,
            nationalityElement
          ),
        {
          signal: controller.signal,
        }
      );
    });

    textFields.forEach(element => {
      element.addEventListener('keydown', keydownEventHandler, {
        signal: controller.signal,
      });
    });

    pickerField.forEach(element => {
      element.addEventListener('input', inputPickerFieldHandler, {
        signal: controller.signal,
      });
    });

    nextElement.addEventListener(
      'click',
      event =>
        nextElementClickHandler(
          event,
          nextElement,
          placeOfBirthElement,
          passportNumberhElement,
          passportExpiryElement,
          nationalityElement,
          currentElement
        ),
      {
        signal: controller.signal,
      }
    );
    uoploadNewPhotoElement.addEventListener(
      'click',
      uoploadNewPhotoElementClickHandler,
      {
        signal: controller.signal,
      }
    );
  });
};