window.addEventListener('load', () => {
    const el = $('#app');
    const url = config.url;
    var track;
    
    //Check if the terms of condition has been accepted
    if (!document.cookie.split(';').filter((item) => item.trim().startsWith('_atou=')).length) {
      $('#myModal').modal();
    }
    

    //Handlebar Templates
    const riconoscimentoTemplate = Handlebars.compile($('#riconoscimento-template').html());
    const registrazioneTemplate = Handlebars.compile($('#registrazione-template').html());
    const elencoTemplate = Handlebars.compile($('#elenco-template').html());
    const riconoscimentoTemplateAfter = Handlebars.compile($('#riconoscimento-template-after').html());
    const registrazioneTemplateAfter = Handlebars.compile($('#registrazione-template-after').html());
    const erroreTemplate = Handlebars.compile($('#errore-template').html());
    const policyTemplate = Handlebars.compile($('#policy-template').html());
    
    const infoMessage = "The Euclidean distance calculated between the closest-face and the submitted one is: $. For values bigger than 0.6 the user is considered as unknown.";
    
    loadElencoTemplate()
    
    function startWebCam(){

      var video = document.querySelector('#video')
      if (navigator.mediaDevices) {
        navigator.mediaDevices.getUserMedia({video: true})
          .then(function(stream) {
            video.srcObject = stream;
            track = stream.getTracks()[0];
          })
          .catch(function(error) {
              console.log(error)
              message = 'The access to the webcam is blocked';
              let html = erroreTemplate(
                {
                  errorMessage: message,
                });
              el.html(html);
          });
      }else{
        console.log("No webcams were found.")

        let html = erroreTemplate(
          {
            errorMessage: "No webcams were found.",
          });

        el.html(html);
      }

      return video;
    }

  function takeSnapshot(video) {
    var canvas;
    var img = document.querySelector('#img');
    var context;
    var width = video.offsetWidth
      , height = video.offsetHeight;

    canvas = canvas || document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);
    return canvas.toDataURL('image/jpg');

  }

      
  $('#riconoscimento').on('click', (event) => {
    let html = riconoscimentoTemplate({
    });
    el.html(html);
    var video = startWebCam();

    $('.submit').click(() => {

      $('.submit').attr("disabled", true);
      var base64 = takeSnapshot(video);
      track.stop();
      
      if(base64 != null){
      
        const body = {
          format: 'jpg',
          content: base64.split(",")[1]
        };
      
        axios.post(url+'/photo/find', body,{
          headers: { "Content-Type": "application/json" }})
          .then(res => {
            let html = riconoscimentoTemplateAfter({
              value: "Hello "+res.data.name+"!",
              photo: base64,
              closestDistance: infoMessage.replace("$", res.data.closestDistance)
            });
            el.html(html);
          }).catch(error => {
            
            let html = riconoscimentoTemplateAfter(
              {
              error: errorMessageExtractor(error),
              photo: base64,
              });

            el.html(html);
            console.log(error.response);
          }).finally(()=> {
            track.stop();
          });

      };

    });

  });
      
  $(".nav-item").click(function(){
    $(".nav-item").removeClass("active");
    $(this).addClass("active");
  });
  
  $('#registrazione').on('click', (event) => {
    
    let html = registrazioneTemplate();
    el.html(html);

    var video = startWebCam();

    $('.submit').click(() => {

      var nickname = $('#nickname').val();
      var base64 = takeSnapshot(video);
      track.stop();
      if(base64 != null && nickname != null){
      
        const body = {
          format: 'jpg',
          content: base64.split(",")[1],
          name: nickname
        };
      
        axios.post(url+'/photo', body,{
          headers: { "Content-Type": "application/json" }})
          .then(res => {
            let html = registrazioneTemplateAfter({
              value: res.data.message,
              photo: base64});
            el.html(html);
        }).catch(error => {
          let html = registrazioneTemplateAfter(
            { error: errorMessageExtractor(error),
              photo: base64
            });
          el.html(html);
          console.log(error);
        }).finally(()=> {
          track.stop();
    });

      };

    });

  });
  
  $('#elenco').on('click', (event) => {
    if(track!=null){
      track.stop();
    }
    loadElencoTemplate();
  });

function loadElencoTemplate(){

  let html = elencoTemplate();
  el.html(html);

  axios.get(url+'/photo',{
      headers: { "Content-Type": "application/json" }
      }).then(res => {
        let html = elencoTemplate({
          people: res.data});
        el.html(html);

        $('.button').click(function(){
          deleteUser($(this).attr('id'));
          loadElencoTemplate();});

      }).catch(error => {
        let html = elencoTemplate({people: "A problem occurred!"});
        el.html(html);
        console.log(error);
        
      }).finally(()=> {
          document.getElementById("loader").style.display = "none";
          document.querySelector("table").style.display = "table";
      });

  }

  function errorMessageExtractor(error){
    
    var message = "A problem occurred!";
    if(error.response!=null && error.response.data!=null && error.response.data.message!=null && error.response.data.message.message != null)
    {
      message = error.response.data.message.message;
    };
    return message;

  }

  function deleteUser(id){

    axios.delete(url+'/photo/'+id,{
      headers: { "Content-Type": "application/json" }})
      .then(res => {
        let html = elencoTemplate({
          people: res.data});
        el.html(html);
      })
      .catch(error => {
        let html = elencoTemplate({people: "A problem occurred!"});
        el.html(html);
        console.log(error);
        
      }).finally(()=> {
          document.getElementById("loader").style.display = "none";
          document.querySelector("table").style.display = "table";
      });
  }

  $('#cookieAndPrivacy').on('click', (event) => {
    if(track!=null){
      track.stop();
    }
    let html = policyTemplate();
    el.html(html);
  });

  });