Efl Learner Profile Add Photo

import Cropme from 'cropme';
import { updateProfileCompletion } from '../efl-learner-profile/efl-learner-profile-update';

export default parentElement => {
  const MOBILE_BREAKPOINT = 820;
  const popUp = parentElement.closest('.efl-profile-left-popup');
  const closeBtn = popUp.querySelector('.efl-profile-left-popup__close');
  const modalcloseBtn = popUp.querySelector(
    '.efl-profile-left-popup__close .large-modal'
  );
  const eflProfileLayout = document.querySelector('.efl-profile-layout');

  const profilePic = document.querySelector(
    '.efl-profile-hero-banner__content--profile__picture--dp img'
  );
  const editPicIcon = document.querySelector(
    '.efl-profile-hero-banner__content--profile__picture .edit-pic'
  );
  const changePic = document.querySelector(
    '.efl-profile-hero-banner__content--profile__picture .change-profile-pic'
  );
  let currentState;
  const state = {
    default: 'DEFAULT',
    capturing: 'CAPTURING',
    cropping: 'CROPPING',
    saving: 'SAVING',
  };
  const defaultSection = parentElement.querySelector('#default');
  const instructionText = parentElement.querySelector('.instructions');
  let uploadImgName;

  // Photo Cropping
  let cropmeObj;
  const uploadPhotoButton = parentElement.querySelector(
    '#efl-profile-upload-photo'
  );
  const cropButton = parentElement.querySelector('#crop-image');
  const imageTypes = ['gif', 'jpg', 'png', 'jpeg', 'jpe', 'jif', 'jfif', 'jfi'];
  const cropmeSection = parentElement.querySelector('#cropme');

  // Camera
  let cameraStream;
  const takePhotoBtn = parentElement.querySelector(
    '.cta[id=efl-profile-take-photo]'
  );
  const cameraSection = parentElement.querySelector('#camera');
  const canvas = cameraSection.querySelector('#cropme-canvas');
  const video = cameraSection.querySelector('#video');
  // const photo = document.getElementById('myImage');
  const capturePhotoBtn = cameraSection.querySelector(
    '.cta[id=efl-profile-capture-photo]'
  );

  const width = 697; // We will scale the photo width to this
  let height = 0; // This will be computed based on the input stream

  let streaming = false;

  // Image Preview
  const previewSection = parentElement.querySelector('#preview');
  const previewImage = previewSection.querySelector('#preview-image');
  const usePhotoButton = previewSection.querySelector('#use-photo');
  const retakeButton = previewSection.querySelector('#retake-photo');
  const uploadAnotherPhotoButton = previewSection.querySelector(
    '#efl-profile-upload-another-photo'
  );
  const errorAlertButton = previewSection.querySelector('#upload-error-alert');
  let imageIsAppropriate = false;

  // Alert Modal
  const alertModal = popUp.querySelector(
    '.efl-profile-left-popup__alert-modal'
  );
  const closeModalBtn = alertModal.querySelector(
    '.cta[id=please-take-a-new-photo]'
  );

  const createImageElement = () => {
    const cropmeWrapper = cropmeSection.querySelector('.cropme-wrapper');

    if (cropmeWrapper) {
      cropmeObj.destroy();
      cropmeWrapper.remove();
      const image = document.createElement('img');

      image.getAttribute('alt', 'my-image');
      image.setAttribute('id', 'myImage');
      cropmeSection.appendChild(image);
    }
  };

  const createCropmeInstance = () => {
    if (document.getElementById('myImage')) {
      const element = document.getElementById('myImage');

      defaultSection.classList.remove('active');
      previewSection.classList.remove('active');
      cropmeSection.classList.add('active');
      instructionText.innerHTML = 'Position your face within the circle below.';
      currentState = state.cropping;

      let containerHeight;

      if (window.innerWidth >= MOBILE_BREAKPOINT) {
        containerHeight = 424;
      } else {
        containerHeight = window.innerHeight - 100;
      }

      cropmeObj = new Cropme(element, {
        container: {
          width: '100%',
          height: containerHeight,
        },
        viewport: {
          width: 311,
          height: 311,
          type: 'circle',
          border: {
            width: 6,
            enable: true,
            color: '#fff',
          },
        },
        zoom: {
          enable: true,
          mouseWheel: true,
          slider: false,
          min: 0.05,
          max: 5,
        },
        transformOrigin: 'viewport',
      });
    }
  };

  // Camera

  function clearphoto() {
    const photo = popUp.querySelector('#myImage');

    const context = canvas.getContext('2d');

    context.fillStyle = '#AAA';
    context.fillRect(0, 0, canvas.width, canvas.height);

    const data = canvas.toDataURL('image/png');

    photo.setAttribute('src', data);
  }

  function takepicture() {
    const photo = popUp.querySelector('#myImage');

    const context = canvas.getContext('2d');

    if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      const data = canvas.toDataURL('image/png');

      photo.setAttribute('src', data);
      uploadImgName = 'camera-photo.png';
      // Turn off Camera Stream
      if (cameraStream && cameraStream.active) {
        cameraStream.getTracks().forEach(track => {
          track.stop();
        });
      }
    } else {
      clearphoto();
    }
  }

  const startupCamera = e => {
    e.preventDefault();

    cameraSection.classList.add('active');
    defaultSection.classList.remove('active');
    previewSection.classList.remove('active');
    instructionText.innerHTML =
      'Take a picture with your face clearly in the frame';
    currentState = state.capturing;

    navigator.mediaDevices
      .getUserMedia({
        video: true,
        audio: false,
      })
      .then(stream => {
        cameraStream = stream;
        video.srcObject = cameraStream;
        video.play();

        defaultSection.classList.remove('active');
        previewSection.setAttribute('data-camera', 'true');
        cameraSection.classList.add('active');
        popUp.classList.add('large-modal');
      });

    clearphoto();

    setTimeout(() => {
      capturePhotoBtn.focus();
    }, 100);
  };

  async function uploadCroppedPhotoCallback(imageUploadData) {
    const url = `/LearnerProfile/UploadPhoto`;
    // eslint-disable-next-line compat/compat
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: imageUploadData,
    });

    return response.json();
  }
  function uploadCroppedPhoto(imageUploadData) {
    // console.log(imageUploadData);
    try {
      // isAjaxRuning = true;
      uploadCroppedPhotoCallback(imageUploadData).then(response => {
        if (response) {
          usePhotoButton.classList.remove('loading-bar');
          usePhotoButton.setAttribute('aria-disabled', 'false');
          if (response.Status && response.Status === 'Success') {
            profilePic.src = previewImage.src;
            profilePic.classList.remove('hidden');
            if (editPicIcon) {
              editPicIcon.classList.remove('hidden');
              setTimeout(() => {
                editPicIcon.focus();
              }, 50);
            }
            if (changePic) {
              changePic.classList.add('hidden');
            }

            popUp.classList.remove('add-animation');
            document.body.classList.remove('efl-profile-dark-overlay');
            eflProfileLayout.style.zIndex = null;

            // Reset UI back to default
            previewSection.classList.remove('active');
            defaultSection.classList.add('active');
            popUp.classList.remove('large-modal');

            // profile completion notification
            updateProfileCompletion(1);
          } else if (response.ErrorCode) {
            previewSection
              .querySelector('.upload-error')
              .classList.remove('hidden');
            previewSection.querySelector('.upload-error p').innerText =
              'response.ErrorDescription';
            setTimeout(() => {
              errorAlertButton.focus();
            }, 10);
          }
        }
      });
    } catch (e) {
      usePhotoButton.classList.remove('loading-bar');
      usePhotoButton.setAttribute('aria-disabled', 'false');
      throw new Error('Uable to upload the photo ::', e);
    }
  }

  if (takePhotoBtn) {
    takePhotoBtn.addEventListener('click', startupCamera, false);
  }

  const uploadPhoto = e => {
    if (e.target.files.length === 0) {
      return;
    }

    popUp.classList.add('large-modal');
    previewSection.setAttribute('data-camera', 'false');

    const pic = e.target.files[0];
    const picName = pic.name;

    uploadImgName = pic.name;
    const filetype = picName
      .substring(picName.lastIndexOf('.') + 1)
      .toLowerCase();

    // checking file type
    if (imageTypes.indexOf(filetype) > -1) {
      if (pic.size < 10000000) {
        createImageElement();

        const reader = new FileReader();

        reader.onload = (() => {
          return event => {
            document.getElementById('myImage').src = event.target.result;
            const img = new Image();

            img.src = window.URL.createObjectURL(pic);
            // eslint-disable-next-line no-undef
            img.addEventListener('load', () => {
              setTimeout(() => {
                previewImage.removeAttribute('src');
                createCropmeInstance();
                cropButton.focus();
              }, 100);
            });
          };
        })(pic);

        reader.readAsDataURL(pic);
        e.target.files[0].value = '';
      }
    }
  };

  if (modalcloseBtn) {
    // add photo functionality only
    modalcloseBtn.addEventListener('click', () => {
      defaultSection.classList.add('active');
      previewSection.classList.remove('active');
      previewSection.querySelector('.upload-error').classList.add('hidden');
      cropmeSection.classList.remove('active');
      cameraSection.classList.remove('active');

      popUp.classList.remove('large-modal');

      // Turn off Camera Stream
      if (cameraStream && cameraStream.active) {
        cameraStream.getTracks().forEach(track => {
          track.stop();
        });
      }

      createImageElement();
      setTimeout(() => {
        if (!editPicIcon.classList.contains('hidden')) {
          editPicIcon.focus();
        } else {
          changePic.focus();
        }
      }, 50);
    });

    modalcloseBtn.addEventListener('keydown', event => {
      if (event.shiftKey && event.keyCode === 9) {
        event.preventDefault();
      } else if (event.keyCode === 13) {
        modalcloseBtn.click();
      }
    });
  }

  uploadPhotoButton.addEventListener('change', uploadPhoto);

  uploadPhotoButton.addEventListener('click', e => {
    e.target.value = null;
  });

  uploadPhotoButton.addEventListener('keydown', event => {
    if (event.keyCode === 9) {
      setTimeout(() => {
        closeBtn.focus();
      }, 50);
    }
  });

  cropButton.addEventListener('click', () => {
    if (currentState !== 'CROPPING') {
      imageIsAppropriate = false;
      return;
    }

    cropmeObj
      .crop({
        type: 'base64',
        width: 311,
      })
      .then(output => {
        previewSection.classList.add('active');
        previewSection.querySelector('.upload-error').classList.add('hidden');
        cropmeSection.classList.remove('active');
        previewImage.src = output;
        currentState = state.saving;
        imageIsAppropriate = true;
        createImageElement();
      });

    setTimeout(() => {
      usePhotoButton.focus();
    }, 10);
  });

  cropButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      event.preventDefault();

      cropButton.click();
    } else if (event.keyCode === 9) {
      setTimeout(() => {
        closeBtn.focus();
      }, 10);
    }
  });

  video.addEventListener(
    'canplay',
    () => {
      if (!streaming) {
        height = video.videoHeight / (video.videoWidth / width);

        if (height === 0) {
          height = width / (19 / 6);
        }

        video.setAttribute('width', width);
        video.setAttribute('max-height', height);
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        streaming = true;
      }
    },
    false
  );

  capturePhotoBtn.addEventListener(
    'click',
    ev => {
      ev.preventDefault();
      takepicture();
      cameraSection.classList.remove('active');
      createCropmeInstance();

      setTimeout(() => {
        cropButton.focus();
      }, 50);
    },
    false
  );

  capturePhotoBtn.addEventListener(
    'keydown',
    event => {
      if (event.keyCode === 13) {
        event.preventDefault();
        takepicture();
        cameraSection.classList.remove('active');
        createCropmeInstance();

        setTimeout(() => {
          cropButton.focus();
        }, 50);
      } else if (event.keyCode === 9) {
        setTimeout(() => {
          closeBtn.focus();
        }, 10);
      }
    },
    false
  );

  // Saving Section

  usePhotoButton.addEventListener('click', e => {
    e.preventDefault();

    usePhotoButton.classList.add('loading-bar');
    usePhotoButton.setAttribute('aria-disabled', 'true');

    // Close UI if successful, show alert modal if unsucessful.
    if (imageIsAppropriate) {
      const { fanid, individualProfilePhotoid } = document.querySelector(
        '.efl-profile-hero-banner__content--profile__picture--dp'
      ).dataset;
      const imageData = previewImage.src.replace('data:image/png;base64,', '');
      let imageUploadData;

      if (individualProfilePhotoid) {
        imageUploadData = `{"FanCode": "${fanid}", "FileName": "${uploadImgName}", "PhotoTypeId": "1", "FileData": "${imageData}", "ApplicationName": "EFL" , "IndividualProfilePhotoId": "${individualProfilePhotoid}", "PhotoTypeDescription": "Individual"}`;
      } else {
        imageUploadData = `{"FanCode": "${fanid}", "FileName": "${uploadImgName}", "PhotoTypeId": "1", "FileData": "${imageData}", "ApplicationName": "EFL", "PhotoTypeDescription": "Individual"}`;
      }

      uploadCroppedPhoto(imageUploadData);
    } else {
      alertModal.classList.add('add-animation');
      parentElement.classList.add('dark-overlay');
    }

    createImageElement();
  });

  usePhotoButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      usePhotoButton.click();
    }
  });

  errorAlertButton.addEventListener('click', e => {
    e.preventDefault();
    previewSection.querySelector('.upload-error').classList.add('hidden');
    setTimeout(() => {
      usePhotoButton.focus();
    }, 50);
  });

  errorAlertButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      errorAlertButton.click();
    } else if (event.keyCode === 9) {
      event.preventDefault();
    }
  });

  retakeButton.addEventListener('click', e => {
    e.preventDefault();

    previewSection.classList.remove('active');
    cameraSection.classList.add('active');

    createImageElement();

    startupCamera(e);

    setTimeout(() => {
      closeBtn.focus();
    }, 50);
  });

  retakeButton.addEventListener('keydown', event => {
    if (event.keyCode === 13) {
      retakeButton.click();
    } else if (event.keyCode === 9) {
      setTimeout(() => {
        closeBtn.focus();
      }, 10);
    }
  });

  uploadAnotherPhotoButton.addEventListener('change', e => {
    createImageElement();

    uploadPhoto(e);
  });

  uploadAnotherPhotoButton.addEventListener('click', e => {
    e.target.value = null;
  });

  uploadAnotherPhotoButton.addEventListener('keydown', event => {
    if (event.keyCode === 9) {
      setTimeout(() => {
        closeBtn.focus();
      }, 50);
    }
  });

  // Alert Modal

  closeModalBtn.addEventListener('click', e => {
    e.preventDefault();

    alertModal.classList.remove('add-animation');
    // Reset UI back to default
    previewSection.classList.remove('active');
    defaultSection.classList.add('active');
    popUp.classList.remove('large-modal');

    setTimeout(() => {
      parentElement.classList.remove('dark-overlay');
    }, 300);
  });
};