Registration Upload Passport

/* eslint-disable operator-linebreak */
/* eslint-disable compat/compat */
import { base64Obj, camera, fileUpload } from '../../camera';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  POST,
  passportUploadPayload,
  passportUploadPath,
  getAuth,
  GET,
  imagepath,
} from '../../service';
import {
  BACKCLICKED,
  NEWPASSPORT,
  currentPage,
  hideStep,
  nevigateToNext,
  onComponentVisible,
  showStep,
} from '../../registrationUtility';

export default (uploadPassport, passportDetails) => {
  const [
    previewElement,
    uploadFileBtn,
    takePhotoBtn,
  ] = uploadPassport.querySelectorAll(
    '.img, .registration-upload-passport__upload-passport-photo .cta--r-primary, .registration-upload-passport__take-passport-photo-click .cta--r-secondary'
  );
  let controller = new AbortController();

  const uploadPhoto = async data => {
    const { base64, type } = base64Obj(data);
    const auth = getAuth();
    const res = await POST(passportUploadPath, {
      ...passportUploadPayload,
      JuniorFancode: !!uploadFileBtn.getAttribute('data-fan'),
      FanCode: uploadFileBtn.getAttribute('data-fan')
        ? uploadFileBtn.getAttribute('data-fan')
        : getAuth().fanCode,
      ContentLength: base64.length,
      ContentType: type,
      FileName: `${auth.fanCode}.${type.split('/')[1]}`,
      ImageUploadPassport: base64,
    });

    if (res.success && res.photoUploaded) {
      nevigateToNext(uploadPassport);
      passportDetails.querySelector('.passport img').setAttribute('src', data);
    } else {
      showServerError(uploadPassport, res.error);
    }
  };

  onComponentVisible(uploadPassport, async () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    hideServerError(uploadPassport);
    showStep('03');
    if (
      uploadPassport.classList.contains('registration-upload-passport-cloned')
    ) {
      hideStep();
    }
    currentPage.page = uploadPassport;

    previewElement.setAttribute(
      'src',
      previewElement.getAttribute('data-placeholderImage')
    );

    const uploadPhotoHandler = (event, prevEle, upldPas) => {
      event.preventDefault();
      fileUpload(prevEle, uploadPhoto, upldPas);
    };

    takePhotoBtn.addEventListener(
      'click',
      event => {
        let parentElement;
        const { tagName } = event.target;

        if (tagName === 'P') {
          parentElement = event.target.parentElement.parentElement;
        } else {
          parentElement = event.target.parentElement;
        }
        event.preventDefault();
        hideServerError(uploadPassport);
        camera(
          previewElement,
          uploadPhoto,
          uploadPassport,
          parentElement.attributes[2]
            ? parentElement.attributes[2].value
            : 'Your devices camera is not supported. Please upload a picture of your passport.',
          parentElement.attributes[1]
            ? parentElement.attributes[1].value
            : 'Take photo'
        );
      },
      { signal: controller.signal }
    );

    uploadFileBtn.addEventListener(
      'click',
      event => uploadPhotoHandler(event, previewElement, uploadPassport),
      { signal: controller.signal }
    );

    if (sessionStorage.getItem(NEWPASSPORT)) {
      sessionStorage.removeItem(NEWPASSPORT);
    } else {
      const imageResponse = await GET(
        imagepath(
          uploadFileBtn.getAttribute('data-fan')
            ? uploadFileBtn.getAttribute('data-fan')
            : getAuth().fanCode,
          'Passport'
        )
      );

      if (imageResponse.success) {
        passportDetails
          .querySelector('.passport img')
          .setAttribute('src', imageResponse.src);
        nevigateToNext(uploadPassport);
      }
    }
    sessionStorage.removeItem(NEWPASSPORT);
    sessionStorage.removeItem(BACKCLICKED);
  });
};