//LocalLike Objekt erstellen

let localLikes = {}


UPLOADCARE_LOCALE_TRANSLATIONS = {
  buttons: {
    cancel: '',
    remove: '',
    choose: {
      files: {
        one: '',
        other: ''
      },
      images: {
        one: '',
        other: ''
      }
    }
  }
};



$(document).ready(function(){

  window.scrollTo(0,1)


  // submit kommentar nicht seite neu laden

    $("#kommentarform").submit(function(e) {
        console.log("Comment Submitted")
        
        e.preventDefault(); // avoid to execute the actual submit of the form.
    });

   


  if(!localStorage.getItem('firstVisit')){
    console.log("loadStartscreen");
    localStorage.setItem('firstVisit', 'false');
    loadStartScreen();
  } else {
    console.log("not load Startscreen ");
    $(".mapControls").removeClass("hideElement")
    $("#logo").removeClass("hideElement")


  }


  //LocalStorage erstellen oder auslesen

  if(localStorage.getItem('localLikes')){
    //likes auslesen

    localLikes = JSON.parse(localStorage.getItem('localLikes'))

    console.log("Stored local Likes:")
    console.log(localLikes)

  }else{

    //LocalLikes leer

    localLikes = {
      ideen: [],
      kommentare: []
    }

    console.log("New Local Likes created")
    console.log(localLikes)

    localStorage.setItem('localLikes',JSON.stringify(localLikes));

  }


})


function loadStartScreen(){

$("#startScreen").removeClass("hideElement")

$('#startScreen').click(() => {
  $(".mapControls").removeClass("hideElement")
  $("#logo").removeClass("hideElement")
  $("#startScreen").addClass("hideElement")

})

setTimeout(() => {
  $(".mapControls").removeClass("hideElement")
  $("#logo").removeClass("hideElement")
  $("#startScreen").addClass("hideElement")
}, 10000);
 //onclick
    //$(".mapControls").removeClass("hideElement")
    //$("#logo").removeClass("hideElement")

}

function openOverlay(){

  $("#overlay").removeClass("hidden").addClass("show")
  $("#currentLocation").addClass("hideButton")

  $("#cancel").click(function() {
    $("#overlay").removeClass("show").addClass("hidden")
    $("#currentLocation").removeClass("hideButton")
    setTimeout(() => {
      document.getElementById("overlay_container").innerHTML = "";
    
    }, 300);
    

  })
}


//LocalStorage Anpassen (Likes hinzufügen oder entfernen)


function chageLocalStorrage(typ, id, addRemove){

  if(typ =="idee"){

    if(addRemove == "add" && !localLikes.ideen.includes(id)){
      localLikes.ideen.push(id);
      console.log("like added");
      console.log(localLikes);
    }else if(addRemove == "remove" && localLikes.ideen.includes(id)){
      let index = localLikes.ideen.indexOf(id);
      localLikes.ideen.splice(index, 1);
      console.log("like removed");
      console.log(localLikes);
    }

  }else if(typ == "kommentar"){

    if(addRemove == "add"){
      localLikes.kommentare.push(id);
    }else if(addRemove == "remove"){
      let index = localLikes.kommentare.indexOf(id);
      localLikes.kommentare.splice(index, 1);
    }


  }

  localStorage.setItem('localLikes',JSON.stringify(localLikes));

}


// IDEE ANZEIGEN

function ideeAnzeigen(data) {

  document.getElementById("overlay_container").innerHTML = "";
  let inhaltContainer = document.createElement("div");
  inhaltContainer.setAttribute("id","inhaltContainer")
  

  let likesErstellen = document.createElement("p");
  let likes = document.createTextNode("Gefällt " + data.likes + " Mal");
  likesErstellen.appendChild(likes);
  likesErstellen.classList.add("likeDisplay");
  
  let titleLocationContainer = document.createElement("div");
  titleLocationContainer.classList.add("titleLocationContainer");
  
  let titelErstellen = document.createElement("h1");
  let titelInhalt = document.createTextNode(data.titel);
  titelErstellen.appendChild(titelInhalt);
  titelErstellen.classList.add("ideeTitel");

  let adresseErstellen = document.createElement("p");
  let adresseInhalt = document.createTextNode(data.adresse);
  adresseErstellen.appendChild(adresseInhalt);
  adresseErstellen.classList.add("ideeAdresse");

  

  let inhaltErstellen = document.createElement("p");
  let inhaltInhalt = document.createTextNode(data.inhalt);
  inhaltErstellen.appendChild(inhaltInhalt);
  inhaltErstellen.classList.add("ideeInhalt");
  



  if(data.bild != null && data.bild != ""){
    let bildContainer = $("<div>").attr({id: "gallery--getting-started", class: "ImgContainer pswp-gallery pswp-gallery--single-column"});

    let loadingscreen = $("<div>").addClass("loadingscreen");
    let loader = $("<div>").addClass("loader");

    loader.appendTo(loadingscreen)
    loadingscreen.appendTo($("#overlay_container"))
    

    let imgUrlArr = JSON.parse(data.bild);

    bildContainer.css("background-image", "url(" + imgUrlArr[0] + ")");


    for (let i = 0; i < imgUrlArr.length; i++) {
      

      let pswpA = $("<a>").attr({href: imgUrlArr[i],  'data-cropped': "true", target: "_blank"}) 
     
      
      pswpA.appendTo(bildContainer)

    }

    bildContainer.prependTo($("#overlay_container"))

    




  } else {
    inhaltContainer.classList.add("class","topMargin")
  }



  let ideeLike = document.createElement("img");
  ideeLike.classList.add("herz");


  //check if user has liked Idea before,load proper image and set class

  if(localLikes.ideen.includes(data.id)){
    ideeLike.src= "../images/herz-1.svg";
    ideeLike.classList.add("liked");
  }else{
    ideeLike.src= "../images/herz-0.svg";
    ideeLike.classList.add("unliked");
  }

  document.getElementById('overlay_container').appendChild(inhaltContainer);
  document.getElementById('inhaltContainer').appendChild(likesErstellen);
  document.getElementById('inhaltContainer').appendChild(ideeLike);
  titleLocationContainer.appendChild(titelErstellen);
  titleLocationContainer.appendChild(adresseErstellen);
  document.getElementById('inhaltContainer').appendChild(titleLocationContainer);
  document.getElementById('inhaltContainer').appendChild(inhaltErstellen);





  ideeLike.addEventListener('click', function() {

    if(localLikes.ideen.includes(data.id)){
      ideeLike.src= "../images/herz-0.svg";
      ideeLike.classList.add("unliked");
      ideeLike.classList.remove("liked");
      removeLike("idee", data.id)
    }else{

      ideeLike.src= "../images/herz-1.svg";
      ideeLike.classList.add("liked");
      ideeLike.classList.remove("unliked");
      addLike("idee", data.id)
    }


  });

  kommentarErstellen(data.id);

  let kommentare_container = document.createElement("div")
  kommentare_container.setAttribute("id", "kommentare_container");
  document.getElementById('inhaltContainer').appendChild(kommentare_container);



  kommentareAnzeigen(data.id);


};




//Like Hinzufügen

function addLike(typ, id, element){



  if(typ == "idee"){

      //increment likes in DB
    $.post('system/addLike.php/?typ=idee&id=' + id, {}).done(function(response){


        //neue Likes anzeigen

        $("p.likeDisplay").html("Gefällt " + response + " Mal")

    });

    //add like in LocalStorage
    chageLocalStorrage("idee", id, "add")




  }else if(typ == "kommentar"){
    $.post('system/addLike.php/?typ=kommentar&id=' + id, {}).done(function(response){


      element.parent().prev().children().first().html("Gefällt " + response + " Mal")


    });

  //add like in LocalStorage
    chageLocalStorrage("kommentar", id, "add")
  }

}

function removeLike(typ, id, element){

  //decrement likes in DB

  if(typ == "idee"){
    $.post('system/removeLike.php/?typ=idee&id=' + id, {}).done(function(response){


      $("p.likeDisplay").html("Gefällt " + response + " Mal")


    });

    chageLocalStorrage("idee", id, "remove")

  }else if(typ == "kommentar"){
    $.post('system/removeLike.php/?typ=kommentar&id=' + id, {}).done(function(response){


      element.parent().prev().children().first().html("Gefällt " + response + " Mal")


    });

    chageLocalStorrage("kommentar", id, "remove")

  }


}



//  kommentar formular likesErstellen

function kommentarErstellen(idee_id) {
  console.log(idee_id);


  let formular = document.createElement("form");
  formular.classList.add("kommentarFormular");
  formular.setAttribute("action", "../system/kommentarSpeichern.php");
  formular.setAttribute("method", "post");
  formular.setAttribute("id", "kommentarform");
  document.getElementById("inhaltContainer").appendChild(formular);

  
  let text_input = document.createElement("textarea");
  text_input.classList.add("kommentarText");
  text_input.setAttribute("rows", "3");
  text_input.setAttribute("type", "text");
  text_input.setAttribute("placeholder", "Schreibe einen Kommentar...");
  text_input.setAttribute("name", "text");

  let submit_input = document.createElement("input");
  submit_input.classList.add("kommentarSubmit");
  submit_input.setAttribute("type", "submit");
  submit_input.setAttribute("value", "");

  let id = document.createElement("input");
  id.setAttribute("type", "hidden");
  id.setAttribute("name", "idee_id")
  id.value = idee_id;

  
  document.getElementById("kommentarform").appendChild(text_input);
  document.getElementById("kommentarform").appendChild(submit_input);
  document.getElementById("kommentarform").appendChild(id);

  $("#kommentarform").submit(function(e){
    
    let form = $(this);

    $.ajax({
      type: "POST",
      url: "/system/kommentarSpeichern.php",
      data: form.serialize(),
    })


      e.preventDefault();
      $("textarea.kommentarText").val("")
      document.getElementById("kommentare_container").innerHTML = "";

      kommentareAnzeigen(idee_id);
  });
};



// Idee formular erstellen
 function formularErstellen(koordianten, ergebnisAdresse) {

  document.getElementById("overlay_container").innerHTML = "";


  let formular = document.createElement("form");
  formular.classList.add("formular");
  formular.setAttribute("action", "../system/ideeSpeichern.php");
  formular.setAttribute("method", "post");
  formular.setAttribute("id", "form");
  document.getElementById("overlay_container").appendChild(formular);

  let koordinaten_lng = document.createElement("input");
  koordinaten_lng.setAttribute("type", "hidden");
  koordinaten_lng.setAttribute("name", "lng")
  koordinaten_lng.value = koordianten.toJSON().lng;

  let koordinaten_lat = document.createElement("input");
  koordinaten_lat.setAttribute("type", "hidden");
  koordinaten_lat.setAttribute("name", "lat")
  koordinaten_lat.value = koordianten.toJSON().lat;



  let titel_input = document.createElement("input");
  titel_input.setAttribute("type", "text");
  titel_input.classList.add("titel");
  titel_input.setAttribute("name", "titel");
  titel_input.setAttribute("placeholder", "TITEL");

  let adresse_input = document.createElement("input");
  adresse_input.setAttribute("type", "text");
  adresse_input.classList.add("adresse");
  adresse_input.setAttribute("name", "adresse");
  adresse_input.setAttribute("value", ergebnisAdresse);
  

  let text_input = $("<textarea>");
  text_input.attr("rows", "10");
  text_input.attr("name", "text");
  text_input.attr("placeholder", "Deine Idee...");

  let image_links = document.createElement("input");
  image_links.setAttribute("type", "hidden");
  image_links.setAttribute("name", "bilder");

  let submit_input = document.createElement("button");
  submit_input.setAttribute("type", "submit");
  submit_input.classList.add("submit");

  let textAndImage = $("<div>").addClass("textAndImage")
  


  document.getElementById("form").appendChild(titel_input);
  document.getElementById("form").appendChild(adresse_input);
  textAndImage.appendTo("#form");
  text_input.appendTo(textAndImage);
 

  document.getElementById("form").appendChild(submit_input);
  document.getElementById("form").appendChild(koordinaten_lat);
  document.getElementById("form").appendChild(koordinaten_lng);
  document.getElementById("form").appendChild(image_links);

  let imageUpload = $('<div class="image-preview" id="image-upload">')
  imageUpload.html('<input type="hidden"  role="uploadcare-uploader" data-public-key="3a3c37e85850c6cfe077" data-multiple="true" data-images-only data-clearable data-tabs="file camera" data-image-shrink="1024x1024" data-system-dialog="true"/>')

  imageUpload.appendTo(textAndImage);



  // get a widget reference
  const widget = uploadcare.Widget("[role=uploadcare-uploader]", { multiple: true});

  // listen to the "upload completed" event
  widget.onUploadComplete(fileGroupInfo => {
    // get a information about uploaded group
    // check https://uploadcare.com/docs/file-uploader-api/file-groups/#file-group-info

    let linkArr = [];
    let ImgUrl;

    
      

    $("<div>").addClass("ImgPrevContainer").appendTo($("div.image-preview"));

    for (var i = 0; i < fileGroupInfo.count && i < 4; i++) {
      ImgUrl = "https://ucarecdn.com/" + fileGroupInfo.uuid + "/nth/" + i + "/-/preview/-/quality/smart/-/format/auto/";
      linkArr.push(ImgUrl);
      createImgPrev(ImgUrl + "-/resize/x100/"); //img Preview 100 pixels high
    };


      // ImgUrl = "https://ucarecdn.com/" + fileInfo.uuid + "/-/preview/-/quality/smart/-/format/auto/";
      // console.log(fileInfo);
      // linkArr.push(ImgUrl);


    let linkArrString = JSON.stringify(linkArr);
    console.log(linkArrString);
    image_links.value = linkArrString;

    $(".uploadcare--widget__button_type_remove").click(() => {
      console.log("delete");
      $("div.ImgPrevContainer").remove()
      image_links.value = "";
    })

  });

  console.log($(".uploadcare--widget__button_type_open needsclick"));
  $(".uploadcare--widget__button_type_open needsclick").addClass("test")


  

};


function createImgPrev(imgURL){
 
  let prevImg = $("<div>").addClass("prevIMG");
  prevImg.css("background-image", "url(" + imgURL + ")");
  prevImg.appendTo($("div.ImgPrevContainer"));

  // $("div.ImgPrevContainer").css('background-image', 'url(' + imgURL + ')');
}



function kommentareAnzeigen(idee_id){


  $.post("./system/alleKommentareHolen.php/?id=" + idee_id, {}).done(function(comments){

 


    let commentArray = JSON.parse(comments);


    for (var i = 0; i < commentArray.length; i++) {


      let thisComment = commentArray[i];


      let kommentarContainer = $("<div>").addClass("comment");
      let kommentarLinks = $("<div>").addClass("commentLeft")
      let kommentarRechts = $("<div>").addClass("commentRight")


     

      let kommentarLikeNumber = $("<p>").text("Gefällt " + thisComment.k_likes + " Mal").addClass("commentLikeNumber");
      kommentarLikeNumber.appendTo(kommentarLinks);

      let kommentarText = $("<p>").addClass("commentText");
      kommentarText.text(thisComment.k_text);
      kommentarText.appendTo(kommentarLinks);

      let kommentarLikeButton = $("<img>").addClass("unliked commentLike")


      if(localLikes.kommentare.includes(thisComment.k_id)){
        kommentarLikeButton.attr("src", "../images/herz-1.svg");
        kommentarLikeButton.addClass("liked");
      }else{
        kommentarLikeButton.attr("src", "../images/herz-0.svg");
        kommentarLikeButton.addClass("unliked");
      }

      kommentarLikeButton.appendTo(kommentarRechts);

      kommentarLinks.appendTo(kommentarContainer)
      kommentarRechts.appendTo(kommentarContainer)

      kommentarContainer.appendTo($("#kommentare_container"));




      kommentarLikeButton.click( function() {

        if(localLikes.kommentare.includes(thisComment.k_id)){
          kommentarLikeButton.attr("src", "../images/herz-0.svg");
          kommentarLikeButton.addClass("unliked");
          kommentarLikeButton.removeClass("liked");
          removeLike("kommentar", thisComment.k_id, $(this))
        }else{

          kommentarLikeButton.attr("src", "../images/herz-1.svg");
          kommentarLikeButton.addClass("liked");
          kommentarLikeButton.removeClass("unliked");
          addLike("kommentar", thisComment.k_id, $(this))

        }


      });





    }


  });


  }