//delete = delets from DB
//remove = removes from HTML

//save = save to DB
//add = changes HTML

//get = get from DB
//new = changes HTML


//CrossSiteReference needed for WAS
var test = {};
var ref = $(test);

$(document).on('change', '#selectfolders', function(e) {
  //getFolders(this.options[e.target.selectedIndex].text);
  listFolders(this.options[e.target.selectedIndex].text);
});


function listFolders(folder = ""){
  $('#Folders').text("");
  $('#CurFolder').text("");
  
  getAllFolders();
  
  if(folder != "" && folder != "." && folder != ".."){
    $("#selectfolders").val(folder);
  }
  else{
    $("#selectfolders").val(".");
  }
  
  $.ajax({
	  type: "GET",
	  url: "../server/folders/" + folder,
	  dataType: "json",
	  success: function(data) {
      
      
      if(folder != "" && folder != "." && folder != ".."){
        var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
        $('[data-class=text]',clone).text("..");
        $('[data-class=link]',clone).attr('onclick','listFolders("' + folder.substr(0, folder.lastIndexOf("/")) + '")'); 
        // dont show remove link on .. folder
        $('[data-class=removefolder]',clone).remove()
        $('#Folders').append(clone);
      }
      
      
      
      $.each( data, function( key, value ) {
        var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
        
        //remove /
        value = value.slice(0,-1)
        $('[data-class=text]',clone).text(value);
        
        if(folder == ""){
          $('[data-class=link]',clone).attr('onclick','listFolders("' + value + '")');
          $('[data-class=removefolder]',clone).attr('onclick','deleteFolder("' + value + '")');
        }
        else{
          $('[data-class=link]',clone).attr('onclick','listFolders("' + folder + "/" + value + '")');
          $('[data-class=removefolder]',clone).attr('onclick','deleteFolder("' + folder + "/" + value + '")');
        }
        $('#Folders').append(clone);
      });
      
      //new Folder
      var clone = document.importNode(document.querySelector('#cpyFolderNew').content,true);
      $('[data-class=text]',clone).text("+");
      $('[data-class=link]',clone).attr('onclick','createFolder("' + folder + '")');
      $('#Folders').append(clone);
    }
  });
  
  listData(folder)
}


function createFolder(folder = ""){
  var newFolder = window.prompt("Please enter a folder name.","");
  if (newFolder != null && newFolder != "") {
    $.ajax({
      type: "Post",
      url: "../server/folders/" + folder + "/" + newFolder,
      success: function(res) {
        listFolders(folder)
      }
    });
  }  
}

function deleteFolder(datalink) {
  if (datalink != "" && datalink != "." && datalink != ".." && confirm('Deleting ' + datalink)) {
    $.ajax({
      type: "DELETE",
      url: "../server/folders/" + datalink,
      success: function(res) {
        listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
      } 
    });
  }
}


function listData(folder = ""){
  $('#Data').text("");
  const imageext = ["png", "jpg", "svg", "JPG", "PNG", "SVG"]
  const movieext = ["mp4"]
  $('#imgUpload').attr("action", "../server/data/" + folder);
  
  $.ajax({
	  type: "GET",
	  url: "../server/images/" + folder,
	  dataType: "json",
	  success: function(data) {
      $.each( data, function( key, value ) {
        
        var ext = value.substr(value.lastIndexOf('.') + 1);
        if(folder == ""){
          fullfolder =  value
        }
        else{
          fullfolder =  folder + "/" + value;
        }
        
        var clone = document.importNode(document.querySelector('#DataItem').content,true);
        $('[data-class=name]',clone).text(value);
        
        //Image
        if(imageext.includes(ext)){
          $('[data-class=image]',clone).append("<img src='./../storage/"+ fullfolder + "' alt=''>")
        }
        else if(movieext.includes(ext)){
          $('[data-class=image]',clone).append("<div class='imageAlternative' style='padding-top: 0.12em;'>▶</div>")
        }
        else{
          $('[data-class=image]',clone).append("<div class='imageAlternative'>🗎</div>")
        }
        
        $('[data-class=image]',clone).attr('onclick',"overlayOn('" + fullfolder + "')");
        
		    $('[data-class=inspect]',clone).attr('href','../storage/' + fullfolder + '');
		    $('[data-class=delete]',clone).attr('href','javascript:deleteData("' + fullfolder + '");');
		    $('[data-class=getLink]',clone).attr('href','javascript:copy2Clipboard("' + fullfolder + '");');
		    $('[data-class=createSymlink]',clone).attr('href','javascript:createSymlink("' + fullfolder + '", "' + value.slice(0, - (ext.length +1)) +'");');
        
        
        var queryString = window.location.search;
        var urlParams = new URLSearchParams(queryString);
        
        if(urlParams.has('iframe')){
          $('[data-class=eventTrigger]',clone).css("visibility", "visible")
		      $('[data-class=eventTrigger]',clone).attr('href','javascript:triggerEvent("' + fullfolder + '");');
          
          console.log("I am an Iframe")
        }
        
        $('#Data').append(clone);
      });
    }
  });
  
  if(folder != "" && folder != "." && folder != ".."){
    $('#RemoveFolder').css("display", "block")
    $('#removeFolderLink').attr('href','javascript:deleteFolder("' + folder + '");');
  }
  else{
    $('#RemoveFolder').css("display", "none")
  }
}
function triggerEvent(data) {
  //get url
  var datalink = new URL("../storage/" + data, document.baseURI).href;
  
  ref = $(test);
  setTimeout(function(){
    ref.triggerHandler('getUrl', {"url": datalink});
  },500);
}

function overlayOn(data) {
  var url = new URL("../storage/" + data, document.baseURI).href
  document.getElementById("overlay").style.display = "block";
  const imageext = ["png", "jpg", "svg", "PNG", "JPG", "SVG"]
  const movieext = ["mp4"]
  var ext = url.substr(url.lastIndexOf('.') + 1);
  
  if(imageext.includes(ext)){
    $('#overlaycontentsize').append("<img id='overlaycontent' src=" + url + "></img>");    
  }
  else if(movieext.includes(ext)){
    $('#overlaycontentsize').append("<video id='overlaycontent' controls> <source src=" + url + " type=\"video/mp4\">Your browser does not support the video tag.</video>");
  }
  else{
    $('#overlaycontentsize').append("<iframe id='overlaycontent' src=" + url + "></iframe>");
  }
}

function overlayOff() {
  document.getElementById("overlay").style.display = "none";
  $('#overlaycontentsize').text("");
}

function deleteData(datalink) {
  if (confirm('Deleting ' + datalink)) {
    $.ajax({
      type: "DELETE",
      url: "../server/data/" + encodeURIComponent(datalink),
      success: function(res) {
        listFolders(datalink.substr(0, datalink.lastIndexOf("/")))
      } 
    });
  }
}


function copy2Clipboard(datalink) {
  new URL("../storage/" + datalink, document.baseURI).href
  datalink = new URL("../storage/" + datalink, document.baseURI).href;
  const el = document.createElement('textarea');
  el.value = datalink;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
}


function createSymlink(datalink, oldfilename) {

  var filename = prompt("Please enter symlink filename");
  
  
  
  if (filename != null && filename != "") {
    var sendfilename = {"filename": filename, "oldfilename": oldfilename}    
    $.ajax({
      type: "POST",
      data: JSON.stringify(sendfilename),
      headers: {"content-id": "list"},
      contentType: "application/json",
      url: "../server/data/" + datalink,
      success: function(res) {
      },
      error: function (request, status, error) {
        alert(request.responseText + status + error);
      }
    });
  }
  
  
}


function getAllFolders(folder = ""){ //Get DB 2 HTML //has to be synchronus in order to update before loading the rest
	$('#selectfolders').find('option').remove()
  $('#selectfolders').append("<option>.</option>")
  $.ajax({
	  type: "GET",
	  url: "../server/allfolders/" + folder,
    async: false,
	  dataType: "json",
	  success: function(data) {
      $.each( data, function( key, value ) {
        $('#selectfolders').append("<option>" + value.slice(0,-1) +"</option>")
        
      });
    }
  });
}


function saveexternalfolder(folder = ""){
  var newFolder = window.prompt("Please enter URL","");
  if (newFolder != null && newFolder != "") {
    $.ajax({
      type: "Post",
      data: JSON.stringify({"folder": newFolder}),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      async:true,
      url: "../server/externalFolder/",
      success: function(res) {
      }
    });
  }  
}

function listExternalFolders(folder = ""){
  $('#ExternalFolders').text("");
  if(folder == ""){
    $.ajax({
      type: "GET",
      url: "../server/externalFolder",
      dataType: "json",
      success: function(data) { 
        $.each( data, function( key, value ) {          
          var clone = document.importNode(document.querySelector('#cpyFolder').content,true);
          
          //remove /
          value = value.slice(0,-1)
          $('[data-class=text]',clone).text(value);
          $('[data-class=link]',clone).attr('onclick','listExternalFolders("' + value + '")');
          $('#ExternalFolders').append(clone);
        });
      }
    });
  }
  else{
    $('#Folders').text("");
    
    
    
    //alert($.get(folder));
    
    /*
      $.ajax({
      type: "GET",
      url: folder,
      crossDomain: true,
      success: function(data) {  
      alert(data);
      }
      });
    */
    
  }
  
  //listData(folder)
}

$(document).ready(function() { 
  listFolders();
  //listExternalFolders();
  getAllFolders();
});