var LOGS_REFRESH_FREQUENCE = 2000; //in milliseconds
var expert_mode = false;

jQuery(document).ready(function(){

  var current_command = data;
  var help = null;

  /**
    These functions are event watchers on the img_display_help
  **/

  $(document).on("mouseenter", "#img_display_help", function() {
        $('#img_display_help').attr('width','40px');
          $('#img_display_help').attr('height','40px');
  });

  $(document).on("mouseleave", "#img_display_help", function() {
    $('#img_display_help').attr('width','30px');
      $('#img_display_help').attr('height','30px');
});


$(document).on('click','#img_display_help', function() {
  alert(help);
});


/**
  This function detete the childs of command_form after the child n° start_position
**/

function delete_childs_after(start_position)
{
  var form = $("#command_form");
  var length = form.children().length;

  for (var i = start_position; i < length; i++) {
    form.children().last().remove();
  }
}

/**
  This function create the select item with the commands in grammar.json
**/
function init_first_param(corresponding_data)
{
  var sel = $('<select>', {name: "first_param", id:"id_first_param"}).appendTo('#command_form');
  sel.append($("<option>").attr('value', "Choose Value").text("Choose Value: "));
  for (var tmp in corresponding_data)
  {
    sel.append($("<option>").attr('value', corresponding_data[tmp]["name"]).text(corresponding_data[tmp]["name"]));
  }
  sel.css("font-size", "20px");
}

/**
  This event watcher is triggered when the first_param (second submit element) is changed, it creates the inputs fields, desc, help  and the submit button
  with the corresponding values in grammar.json with current_command previously defined
**/

 $(document).on('change','#id_first_param', function() {
    delete_childs_after(4);
    var form = $("#command_form");
    var selected_command = $("#id_first_param").find(":selected").val();
    var input = null;
    var label = null;
    for (var tmp in current_command) 
    {
      if (current_command[tmp]["name"] === selected_command)
      {
        input = current_command[tmp]["input_label"][0];
        help = current_command[tmp]["help"];
        label = current_command[tmp]["label"];
      }
    }

    var number = 0;
    for (var input_field in input)
    {
      var maxlength = input[input_field][0];
      var type_input = input[input_field][1];
      var desc = input[input_field][2];
      var id = "input_number_" + number;
      var name = "input_number_" + number;
      var title = desc + ". value type: " + type_input;
      number++;
      input_element = $("<label>" + input_field + " </label><input title=\"" + title + "\" type=\"text\" id=\"" + id + "\" name=\"" + id + "\" maxlength=\"" + maxlength + "\" size=\"10\" text=\"" + input_field + "\"/>");
      form.append(input_element);
    }

   var img_display_help = document.createElement('img');
   img_display_help.src = "/public/static/media/question-mark.png";
   img_display_help.width = 30;
   img_display_help.height = 30;
   img_display_help.title = "Click to display help for this command";
   img_display_help.id ="img_display_help";
   img_display_help.alt="html5";

   form.append(img_display_help);
   $("#img_display_help").css("margin-left", "10px");
   form.append("<br><br><p id=\"command_label\">Command description: " + label + "</p>");
   //$("#command_label").css("text-align", "center");
   $("#command_label").css({
   'font-size' : '15px',
   'text-align' : 'center',
   'font-weight' : 'bold'
      });
    form.append("<br>")
    $('<input>', {id:"submit_button", type:"submit", value:"SEND"}).appendTo(form);

  });


  /**
    This event watcher is triggered when the first select element is changed, it set the json current_command to SET,  GET or DO, it
    calls init_first_param
  **/
  $("#id_first_command").change(function() {
    delete_childs_after(3);
    var selected_command = $("#id_first_command").find(":selected").val();
    if (selected_command !== "Command")
    {
      current_command = data["CameraVIS"][selected_command.toLowerCase()];
      init_first_param(data["CameraVIS"][selected_command.toLowerCase()]);
    }
  });


 /**
    This event watcher is triggered when the expert mode is activated, it generates the corresponding input field and submit_button
 **/

$("#expert_mode").click(function(){
  if (!expert_mode)
  {
    expert_mode = true;
    $("#command_form_expert").append("<input id='input_command_expert' type='text' name='commande_expert'>");
    $('<input>', {id:"submit_button_expert", type:"submit", value:"SEND"}).appendTo('#command_form_expert');
  }
  else {
    $("#input_command_expert").remove();
    $("#submit_button_expert").remove();
    expert_mode = false;
  }
  //$("#command_form").remove();
});

/**
  This event watcher is triggered when the expert form is submitted, it's and AJAX POST request, the response is displayed in the console
**/

$("#command_form_expert").submit(function(event){

  event.preventDefault();
  $.post('observation_status/send_command_to_cameraVIS_1/submit_expert', $(this).serialize(), function(data){
      var obj = JSON.parse(data);
      console.log(obj.message);
      console.log(obj.response);
      if (obj.response === "KO: Unknown command")
        alert("Unknown command");
      else if (obj.response.startsWith("KO"))
          alert(obj.response);
    })
       .fail(function() {
         alert( "An error occured" );
       })
    });


/**
    This AJAX refreshed request is a get retrieving the Logs of the telescope
**/

  interval_camera = setInterval(function() {ajax_request();}, LOGS_REFRESH_FREQUENCE);

  function ajax_request(){
    var camera_url ="/devices/update_ddrago_r_logs";
    $.ajax({
      url: camera_url,
      type: 'get',
      dataType: 'text',
      success: function(data)
      {
        var obj = JSON.parse(data);
        if (obj) {
          var listDiv = document.getElementById('ddrago_r_logs');
          listDiv.innerHTML = '';
          for (var tmp in obj) {
            var li = document.createElement('li');
            li.innerHTML = obj[tmp]['fields']['created'] + ":     " + obj[tmp]['fields']['message'];   // Use innerHTML to set the text
            listDiv.appendChild(li);
          }
        }
      },
      error: function()
      {
        console.log('Ajax error: GET request failed\n');
      }

    });
  }
});