Registration Upload Profile

/* eslint-disable operator-linebreak */
/* eslint-disable compat/compat */
import Cropme from 'cropme';
import { base64Obj, camera, fileUpload } from '../../camera';
import { hideClass } from '../../registration-error/registration-error';
import {
  hideRegistrationLoader,
  showRegistrationLoader,
} from '../../registration-loader/registration-loader';
import {
  hideServerError,
  showServerError,
} from '../../registration-server-error/registration-server-error';
import {
  currentPage,
  hideStep,
  nevigateToNext,
  onComponentVisible,
  setTitle,
  showStep,
} from '../../registrationUtility';
import {
  GET,
  POST,
  getAuth,
  imagepath,
  profileUploadPath,
  profileUploadPayload,
} from '../../service';

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

  onComponentVisible(currentElement, async () => {
    controller.abort('Removing previous event listeners');
    controller = new AbortController();
    const [
      title,
      previewElementContainer,
      previewElement,
      imageUploadBtnContainer,
      uploadProfilePhotoCta,
      takeProfilePhotoCta,
      imageCropBtnContainer,
      zoomContainer,
      rotateContainer,
      nextCtn,
      takenewPhotoCta,
    ] = currentElement.querySelectorAll(
      '.registration-form-sub-title, .registration-upload-profile__image-container, .registration-upload-profile__img, .registration-image-upload-btn-container, .registration-upload-profile__upload-profile-photo .cta, .registration-upload-profile__take-profile-photo-click .cta, .registration-image-crop-btn-container, .registration-image-crop-zoom-container, .registration-image-crop-rotate-container, .registration-upload-profile__next_btn .cta, .registration-upload-profile__take-new-photo .cta'
    );
    const initiateCropme = _previewElement => {
      showRegistrationLoader();

      cropmeInstance = new Cropme(_previewElement, {
        container: {
          width: '100%',
          height: 222,
        },
        viewport: {
          width: 200,
          height: 200,
          type: 'square',
          border: {
            width: '1',
            enable: true,
            color: '#fff',
          },
        },
        zoom: {
          enable: true,
          mouseWheel: true,
          slider: true,
        },
        rotation: {
          slider: true,
          enable: true,
          position: 'left',
        },
        transformOrigin: 'image',
        customClass: 'cropme-custom-class',
      });
      hideRegistrationLoader();
      return cropmeInstance;
    };

    const destroyCropme = () => {
      if (currentElement.querySelector('.cropme-wrapper') && cropmeInstance) {
        cropmeInstance.destroy();
      }
      if (!currentElement.querySelector('.registration-upload-profile__img')) {
        previewElement.style = '';
        previewElementContainer.appendChild(previewElement);
      }
    };

    destroyCropme();
    cropmeInstance = undefined;

    const initializeSliders = () => {
      const [_customZoom, _customRotate] = currentElement.querySelectorAll(
        '.registration-image-crop-zoom-container #cropme-slider, .registration-image-crop-rotate-container #cropme-rotation-slider'
      );
      const [
        _zoomContainer,
        _rotateContainer,
      ] = currentElement.querySelectorAll(
        '.cropme-wrapper .cropme-slider, .cropme-wrapper .cropme-rotation-slider'
      );

      if (
        _customZoom.querySelector('input') &&
        _customRotate.querySelector('input')
      ) {
        _customZoom.querySelector('input').remove();
        _customRotate.querySelector('input').remove();
      }

      _customRotate.parentElement.classList.remove(hideClass);
      _customZoom.parentElement.classList.remove(hideClass);

      _customZoom.appendChild(_zoomContainer.querySelector('input'));
      _customRotate.appendChild(_rotateContainer.querySelector('input'));
      _zoomContainer.remove();
      _rotateContainer.remove();
    };

    const setInitialState = () => {
      destroyCropme();
      showRegistrationLoader();
      hideServerError(currentElement);
      previewElement.setAttribute(
        'src',
        previewElement.getAttribute('data-placeholderImage')
      );
      setTitle(currentElement, title.getAttribute('data-instruction1'));
      imageUploadBtnContainer.classList.remove(hideClass);
      imageCropBtnContainer.classList.add(hideClass);
      zoomContainer.classList.add(hideClass);
      rotateContainer.classList.add(hideClass);
      hideRegistrationLoader();
    };

    currentPage.page = currentElement;
    showStep('04');
    if (
      currentElement.classList.contains('registration-upload-profile-cloned')
    ) {
      hideStep();
    }
    setInitialState();

    const profileRes = await GET(
      imagepath(
        nextCtn.getAttribute('data-fan')
          ? nextCtn.getAttribute('data-fan')
          : getAuth().fanCode,
        'Photo'
      )
    );

    if (profileRes.success) {
      setTitle(currentElement, title.getAttribute('data-instruction3'));
      previewElement.setAttribute('src', profileRes.src);
      imageUploadBtnContainer.classList.add(hideClass);
      imageCropBtnContainer.classList.remove(hideClass);
    }

    const profilePhotoCallback = imageData => {
      hideServerError(currentElement);
      destroyCropme();
      cropmeInstance = initiateCropme(previewElement);
      setTitle(currentElement, title.getAttribute('data-instruction2'));
      previewElement.setAttribute('src', imageData);
      initializeSliders();
      imageUploadBtnContainer.classList.add(hideClass);
      imageCropBtnContainer.classList.remove(hideClass);
    };

    uploadProfilePhotoCta.addEventListener(
      'click',
      event => {
        event.preventDefault();
        hideServerError(currentElement);
        fileUpload(previewElement, profilePhotoCallback, currentElement);
      },
      { signal: controller.signal }
    );

    takeProfilePhotoCta.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(currentElement);
        camera(
          previewElement,
          profilePhotoCallback,
          currentElement,
          parentElement.attributes[2]
            ? parentElement.attributes[2].value
            : 'Your devices camera is not supported. Please upload your profile picture.',
          parentElement.attributes[1]
            ? parentElement.attributes[1].value
            : 'Take photo'
        );
      },
      { signal: controller.signal }
    );
    nextCtn.addEventListener(
      'click',
      async event => {
        const thisNode = event.target;

        event.preventDefault();
        if (!currentElement.querySelector('.cropme-wrapper')) {
          nevigateToNext(currentElement);
        } else {
          const cropperImage = await cropmeInstance.crop();
          const { base64, type } = base64Obj(cropperImage);
          const auth = getAuth();
          const profileResData = await POST(profileUploadPath, {
            ...profileUploadPayload,
            JuniorFancode: !!thisNode.getAttribute('data-fan'),
            FanCode: thisNode.getAttribute('data-fan')
              ? thisNode.getAttribute('data-fan')
              : auth.fanCode,
            ContentLength: base64.length,
            ContentType: type,
            FileName: `${auth.fanCode}.${type.split('/')[1]}`,
            ImageUploadPhoto: base64,
          });

          if (profileResData.success && profileResData.photoUploaded) {
            destroyCropme();
            nevigateToNext(currentElement);
          } else {
            showServerError(currentElement, profileResData.error);
          }
        }
      },
      { signal: controller.signal }
    );
    takenewPhotoCta.addEventListener(
      'click',
      event => {
        event.preventDefault();
        setInitialState();
      },
      { signal: controller.signal }
    );
  });
};