let clicked_presentation_frame = null;
$(document).ready(function () {
  $("#iframe-modal-submit").click(editPresentationSettings);
// complex-iframe
  $(".presentation-settings").click(function () {
    clicked_presentation_frame = $(this);
    var id = $(this).attr("data-id");

    $("#presentation_region").val("");
    $("#presentation_endDate").val("");
    $("#presentation_color").val("");
    $("#iframe_url").text("");

    if (id) {
      $.ajax({
        url: "/admin/ajax/togglePresentationFrame.php?id=" + id,
        success: function (res) {
          if (res) {
            
            const response = JSON.parse(res);
            if (response.status) {
              console.log(+response.data["rf_region_id"]);

              $("#presentation_region").val(+response.data["rf_region_id"]);
              $("#presentation_endDate").val(response.data["end_date"]);
              $("#presentation_color").val(response.data["color"]);

              const url = response.data['url']; // `http://localhost:8080/#/catalogs/${response.data["token"]}`;
              const iframe = `<iframe title="Presentation" width="800" height="800" src="${url}"> </iframe>`
              $("#iframe_url").html(`<code></code>`);
              $("#iframe_url > code").text(iframe)

              $("#iframe_url  +svg")
                // .off("click")
                .on("click", function () {
                  copyToClipboard(iframe);
                  showCopiedMessage();
                });
            }
            console.log(response);
            
          }
          $("#edit_presentation_settings_bg").fadeIn(500);
          $("#edit_presentation_settings").toggle(10);
          $("body").addClass("lock");
        },
      });
    }
  });
  $(".complex-iframe").click(function () {
    clicked_complexes_frame = $(this);
    var id = $(this).attr("data-id");

    // $("#complexes_presentation_region").val("");
    // $("#complexes_presentation_endDate").val("");
    // $("#complexes_presentation_color").val("");
    $("#iframe_url").text("");

    if (id) {
      $.ajax({
        url: "/admin/ajax/togglePresentationFrame.php?id=" + id,
        success: function (res) {
          // if (res) {
          //   const response = JSON.parse(res);
          //   if (response.status) {
          //     console.log(+response.data["rf_region_id"]);

          //     $("#presentation_region").val(+response.data["rf_region_id"]);
          //     $("#presentation_endDate").val(response.data["end_date"]);
          //     $("#presentation_color").val(response.data["color"]);

          //     const url = response.data['url']; // `http://localhost:8080/#/catalogs/${response.data["token"]}`;
          //     const iframe = `<iframe title="Presentation" width="800" height="800" src="${url}"> </iframe>`
          //     $("#iframe_url").html(`<code></code>`);
          //     $("#iframe_url > code").text(iframe)

          //     $("#iframe_url  +svg")
          //       // .off("click")
          //       .on("click", function () {
          //         copyToClipboard(iframe);
          //         showCopiedMessage();
          //       });
          //   }
          //   console.log(response);
            
          // }
          $("#edit_presentation_settings_bg").fadeIn(500);
          $("#edit_presentation_settings").toggle(10);
          $("body").addClass("lock");
        },
      });
    }
  });
  

  $("body").on("click", ".closer", function (e) {
    $("#edit_presentation_settings_bg").hide(10);
    $("#edit_presentation_settings").hide(10);
    $("body").removeClass("lock");
  });

  function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
  }
  function showCopiedMessage() {
    const tooltip = $(".iframe_tooltip");
    tooltip.show();
    setTimeout(function() {
      tooltip.fadeOut();
    }, 2000);
  }
});


function editPresentationSettings(event) {
  let region = document.getElementById("presentation_region").value;
  let endDate = document.getElementById("presentation_endDate").value;
  let color = document.getElementById("presentation_color").value;
  let url = document.getElementById("iframe_url").value;
  if (clicked_presentation_frame) {
    const id = clicked_presentation_frame.attr("data-id");
    console.log(region, endDate);

    $.ajax({
      url: "/admin/ajax/togglePresentationFrame.php?id=" + id,
      method: "post",
      data: { region, endDate, color, url, id },
      success: function (data) {
        $("body").removeClass("lock");
        window.location.reload(true);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        var i = errorThrown;
      },
    });
  }
}