"use strict";
(function () {
  const
    control_againButton = document.getElementById("AgainButton"),
    control_selfieBase64Image = document.getElementById("SelfieBase64Image"),
    control_canvas = document.getElementById("Canvas"),
    control_nextButton = document.getElementById("NextButton"),
    control_photo = document.getElementById("Photo"),
    control_photoContainer = document.getElementById("PhotoContainer"),
    control_takePictureButton = document.getElementById("TakePictureButton"),
    control_video = document.getElementById("Video"),
    control_videoContainer = document.getElementById("VideoContainer");

  function _bindEvents() {
    control_video.addEventListener('canplay', _canPlay);
    control_takePictureButton.addEventListener("click", _takePicture);
    control_againButton.addEventListener("click", _showCamera);
  }

  function _canPlay() {
    let width = 400;
    let height = control_video.videoHeight / (control_video.videoWidth / width);

    // Firefox currently has a bug where the height can't be read from
    // the video, so we will make assumptions if this happens.

    if (isNaN(height)) {
      height = width / (4 / 3);
    }
    control_canvas.setAttribute('width', width);
    control_canvas.setAttribute('height', height);
  }

  function _init() {
    _loadCamera();
    _bindEvents();
    _showCamera();
  }

  function _loadCamera() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: false, })
      .then(function (stream) {
        let options = { mimeType: self.mimeType };
        if (navigator.userAgent.indexOf('Chrome') >= 0) {
          options = { mimeType: "video/webm; codecs=vp9" };
        }

        control_video.srcObject = stream;
        control_video.play();
      })
      .catch(function (err) {
        console.error("Unable to initialize camera: " + err);
      });
  }

  function _showCamera() {
    jfa.utilities.element.hide(control_photoContainer);
    jfa.utilities.element.show(control_videoContainer);

    jfa.utilities.element.show(control_takePictureButton);
    jfa.utilities.element.hide(control_againButton);

    jfa.utilities.element.disable(control_nextButton);
  }

  function _showPhoto() {
    jfa.utilities.element.show(control_photoContainer);
    jfa.utilities.element.hide(control_videoContainer);

    jfa.utilities.element.show(control_againButton);
    jfa.utilities.element.hide(control_takePictureButton);

    jfa.utilities.element.enable(control_nextButton);
  }

  function _takePicture() {
    let ratio = control_video.videoWidth / control_video.videoHeight;
    let newHeight = control_canvas.height;
    let newWidth = control_canvas.height * ratio;

    control_canvas.width = newWidth;
    control_canvas.height = newHeight;

    const context = control_canvas.getContext('2d');
    context.drawImage(control_video, 0, 0, newWidth, newHeight);

    const data = control_canvas.toDataURL('image/jpg');
    control_photo.setAttribute('src', data);
    debugger;
    control_selfieBase64Image.value = data;

    _showPhoto();
  }

  _init();
})();