let streaming;
var width = document.getElementById("video").parentNode.parentElement.clientWidth;
var height = width / (4 / 3);

function startup(){
  video = document.getElementById('video');
  canvas = document.getElementById('canvas');
  photo = document.getElementById('photo');
  switch_cameras = document.getElementById('flip')
  printButton = document.getElementById('print_button');

  if ( check_webcam() ){
    setup_events();
    clear_canvas();
  } else {
    console.log("Seems like it's impossible to get a webcam.");
  }
}

function check_webcam(){
  try {
    // access video stream from webcam
    navigator.mediaDevices.getUserMedia({
           video: true,
           audio: false
       })
       // on success, stream it in video tag
       // the video tag is hidden, as is the canvas.
       .then(function(stream) {
          switch_cameras.removeAttribute("disabled","");

           video.srcObject = stream;
           video.play();
       })
       .catch(function(err) {
           console.log("An error occurred: " + err);

       });
  } catch (err) {
    console.log("An error occurred: " + err);
    console.log("Seems like they is no webcam available.")

    // We disable the print button is it cannot be clicked.
    printButton.setAttribute("disabled","");

    // We create an alert message.
    const frame_div = document.getElementById("image_dither");
    frame_div.removeAttribute('class');

    const alert_div = document.createElement("div");
    alert_div.setAttribute("class", "alert alert-warning");
    alert_div.setAttribute("role", "alert");

    var alert_message = document.createTextNode("We where unable to get a Webcam device, this page will not work.");
    alert_div.appendChild(alert_message);
    frame_div.appendChild(alert_div);
    console.log("Should be a new div somewhere");
    throw new Error("Unable to get a video device, stopping the photobooth.");
  } finally {


  }
  return true;
}

function setup_events(){

  // When the video is ready, we start streaming it to the canvas.
  // The canvas is hidden, but it still exists in the browser.
  video.addEventListener('canplay', function(ev) {
      if (!streaming) {
          height = video.videoHeight / (video.videoWidth / width);

          if (isNaN(height)) {
              height = width / (4 / 3);
          }

          video.setAttribute('width', width);
          video.setAttribute('height', height);
          canvas.setAttribute('width', width);
          canvas.setAttribute('height', height);

          photo.setAttribute('width', width);
          photo.setAttribute('height', height);


          streaming = true;
          printButton.removeAttribute("disabled","");

      }
  }, false);

  switch_cameras.addEventListener('click', function(ev) {
    alert("Just turn your phone.");
  }, false );

  printButton.addEventListener('click', function(ev){
    data = take_picture();
    print_picture(data)
    ev.preventDefault();
  }, false);

}

function clear_canvas() {
    var context = canvas.getContext('2d');
    context.fillStyle = "#AAA";
    context.fillRect(0, 0, canvas.width, canvas.height);

    var data = canvas.toDataURL('image/png');
    photo.setAttribute('src', data);
}

function dataURLtoFile(dataurl, filename) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, {type:mime});
}

function take_picture(){
  var context = canvas.getContext('2d');
  if (width && height) {
      canvas.width = width;
      canvas.height = height;
      context.drawImage(video, 0, 0, width, height);

      var data = canvas.toDataURL('image/png');
      photo.setAttribute('src', data);
  } else {
      clear_canvas();
  }

  return data;
}

function print_picture(data){
  var url = "/api/print/img"
  var picture = dataURLtoFile(data);
  const formData = new FormData();
  let currentDate = new Date();
  let time = currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();

  formData.set("img", picture, "picture.png");
  formData.set("signature", "Printed via the webcam @ " + time)

  fetch(url, {
    method: 'POST', // or 'PUT'
    body: formData,
    // headers:{
    //   'Content-Type': 'multipart/form-data'
    // }
  }).then(response => console.log('Success:', response), true)
  .catch(error => console.error('Error:', error), false);

}

window.addEventListener('load', startup, false);